Skip to content
Patternfly Logo

Masthead

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

Masthead should contain the following components to maintain proper layout and formatting: MastheadToggle, MastheadMain, and MastheadContent.

MastheadMain represents the smaller area taken up by a logo, and will typically contain a MastheadBrand. MastheadContent represents the main portion of the masthead area and will typically contain a Toolbar or other menu-like content such as Dropdown.

Examples

Basic

Content

Basic with mixed content

Testing text color

Display inline

Content

Display stack

Content

Display stack, display inline responsive

Content

Light variant

Content

Light 200 variant

Content

Inset

Content

Props

Masthead

*required
NameTypeDefaultDescription
backgroundColor'dark' | 'light' | 'light200''dark'Background theme color of the masthead
childrenReact.ReactNodeContent rendered inside of the masthead
classNamestringAdditional classes added to the masthead
display{ default?: 'inline' | 'stack'; sm?: 'inline' | 'stack'; md?: 'inline' | 'stack'; lg?: 'inline' | 'stack'; xl?: 'inline' | 'stack'; '2xl'?: 'inline' | 'stack'; }{ md: 'inline' }Display type at various breakpoints
inset{ default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; }Insets at various breakpoints

MastheadToggle

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside of the masthead toggle.
classNamestringAdditional classes added to the masthead toggle.

MastheadMain

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside of the masthead main block.
classNamestringAdditional classes added to the masthead main.

MastheadBrand

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside of the masthead brand.
classNamestringAdditional classes added to the masthead brand.
componentReact.ElementType<any> | React.ComponentType<any>'a'Component type of the masthead brand.

MastheadContent

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside of the masthead content block.
classNamestringAdditional classes added to the masthead content.

CSS variables

.pf-c-masthead.pf-m-light-200--pf-global--Color--100
#151515
.pf-c-masthead.pf-m-light-200--pf-global--Color--200
#6a6e73
.pf-c-masthead.pf-m-light-200--pf-global--BorderColor--100
#d2d2d2
.pf-c-masthead.pf-m-light-200--pf-global--primary-color--100
#06c
.pf-c-masthead.pf-m-light-200--pf-global--link--Color
#06c
.pf-c-masthead.pf-m-light-200--pf-global--link--Color--hover
#004080
.pf-c-masthead.pf-m-light-200--pf-global--BackgroundColor--100
#fff
.pf-c-masthead.pf-m-light-200--pf-c-masthead--BackgroundColor
#f0f0f0
.pf-c-masthead.pf-m-light-200--pf-c-masthead__main--BorderBottomColor
#d2d2d2
.pf-c-masthead--pf-global--Color--100
#fff
.pf-c-masthead--pf-global--Color--200
#f0f0f0
.pf-c-masthead--pf-global--BorderColor--100
#b8bbbe
.pf-c-masthead--pf-global--primary-color--100
#73bcf7
.pf-c-masthead--pf-global--link--Color
#2b9af3
.pf-c-masthead--pf-global--link--Color--hover
#2b9af3
.pf-c-masthead--pf-global--BackgroundColor--100
#151515
.pf-c-masthead--pf-c-masthead--PaddingLeft
1rem
.pf-c-masthead--pf-c-masthead--PaddingRight
1rem
.pf-c-masthead--pf-c-masthead--BackgroundColor
#151515
.pf-c-masthead--pf-c-masthead--inset
1rem
.pf-c-masthead--pf-c-masthead--xl--inset
1.5rem
.pf-c-masthead--pf-c-masthead--m-display-stack--GridTemplateColumns
max-content 1fr
.pf-c-masthead--pf-c-masthead--m-display-stack__main--GridColumn
-1 / 1
.pf-c-masthead--pf-c-masthead--m-display-stack__main--MinHeight
4.375rem
.pf-c-masthead--pf-c-masthead--m-display-stack__main--Order
-1
.pf-c-masthead--pf-c-masthead--m-display-stack__main--FlexBasis
100%
.pf-c-masthead--pf-c-masthead--m-display-stack__main--PaddingTop
0.5rem
.pf-c-masthead--pf-c-masthead--m-display-stack__main--PaddingBottom
0.5rem
.pf-c-masthead--pf-c-masthead--m-display-stack__main--MarginRight
0
.pf-c-masthead--pf-c-masthead--m-display-stack__main--before--BorderBottom
1px solid #6a6e73
.pf-c-masthead--pf-c-masthead--m-display-stack__toggle--GridColumn
1
.pf-c-masthead--pf-c-masthead--m-display-stack__content--GridColumn
2
.pf-c-masthead--pf-c-masthead--m-display-stack__content--MinHeight
auto
.pf-c-masthead--pf-c-masthead--m-display-stack__content--Order
1
.pf-c-masthead--pf-c-masthead--m-display-stack__content--PaddingTop
0
.pf-c-masthead--pf-c-masthead--m-display-stack__content--PaddingBottom
0
.pf-c-masthead--pf-c-masthead--m-display-stack__content--MarginLeft
0
.pf-c-masthead--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead--m-display-inline--GridTemplateColumns
max-content max-content 1fr
.pf-c-masthead--pf-c-masthead--m-display-inline__main--GridColumn
2
.pf-c-masthead--pf-c-masthead--m-display-inline__main--MinHeight
4.375rem
.pf-c-masthead--pf-c-masthead--m-display-inline__main--Order
0
.pf-c-masthead--pf-c-masthead--m-display-inline__main--FlexBasis
auto
.pf-c-masthead--pf-c-masthead--m-display-inline__main--PaddingTop
0
.pf-c-masthead--pf-c-masthead--m-display-inline__main--PaddingBottom
0
.pf-c-masthead--pf-c-masthead--m-display-inline__main--MarginRight
calc(1.5rem / 2)
.pf-c-masthead--pf-c-masthead--m-display-inline__main--BorderBottom
0
.pf-c-masthead--pf-c-masthead--m-display-inline__toggle--GridColumn
1
.pf-c-masthead--pf-c-masthead--m-display-inline__content--GridColumn
3
.pf-c-masthead--pf-c-masthead--m-display-inline__content--MinHeight
4.375rem
.pf-c-masthead--pf-c-masthead--m-display-inline__content--Order
0
.pf-c-masthead--pf-c-masthead--m-display-inline__content--PaddingTop
0
.pf-c-masthead--pf-c-masthead--m-display-inline__content--PaddingBottom
0
.pf-c-masthead--pf-c-masthead--m-display-inline__content--MarginLeft
calc(1.5rem / 2)
.pf-c-masthead--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight
0
.pf-c-masthead--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft
0
.pf-c-masthead--pf-c-masthead__main--before--Right
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead__main--before--Left
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead__main--before--BorderBottomWidth
1px
.pf-c-masthead--pf-c-masthead__main--before--BorderBottomColor
#6a6e73
.pf-c-masthead--pf-c-masthead__toggle--MarginRight
0.5rem
.pf-c-masthead--pf-c-masthead__toggle--MarginLeft
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead__toggle--c-button--FontSize
1.5rem
.pf-c-masthead--pf-c-masthead--m-light--BackgroundColor
#fff
.pf-c-masthead--pf-c-masthead--m-light__main--BorderBottomColor
#f0f0f0
.pf-c-masthead--pf-c-masthead--m-light-200--BackgroundColor
#f0f0f0
.pf-c-masthead--pf-c-masthead--m-light-200__main--BorderBottomColor
#d2d2d2
.pf-c-masthead--pf-c-masthead--c-toolbar__item--Display
flex
.pf-c-masthead--pf-c-masthead--item-border-color--base
#3c3f42
.pf-c-masthead--pf-c-masthead--c-context-selector--Width
auto
.pf-c-masthead--pf-c-masthead--c-context-selector__toggle--BorderTopColor
#3c3f42
.pf-c-masthead--pf-c-masthead--c-context-selector__toggle--BorderRightColor
#3c3f42
.pf-c-masthead--pf-c-masthead--c-context-selector__toggle--BorderLeftColor
#3c3f42
.pf-c-masthead--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor
transparent
.pf-c-masthead--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor
transparent
.pf-c-masthead--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor
#3c3f42
.pf-c-masthead--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor
#3c3f42
.pf-c-masthead--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor
#3c3f42
.pf-c-masthead--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor
transparent
.pf-c-masthead--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor
transparent
.pf-c-masthead--pf-c-masthead--c-menu-toggle--before--BorderTopColor
#3c3f42
.pf-c-masthead--pf-c-masthead--c-menu-toggle--before--BorderRightColor
#3c3f42
.pf-c-masthead--pf-c-masthead--c-menu-toggle--before--BorderLeftColor
#3c3f42
.pf-c-masthead--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor
transparent
.pf-c-masthead--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor
transparent
.pf-c-masthead--pf-c-masthead--c-toolbar__content--PaddingRight
0
.pf-c-masthead--pf-c-masthead--c-toolbar__content--PaddingLeft
0
.pf-c-masthead--pf-c-masthead--c-toolbar__expandable-content--PaddingTop
1rem
.pf-c-masthead--pf-c-masthead--c-toolbar__expandable-content--PaddingRight
1rem
.pf-c-masthead--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom
1rem
.pf-c-masthead--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft
1rem
.pf-c-masthead--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth
1px
.pf-c-masthead--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor
#3c3f42
.pf-c-masthead--pf-c-masthead--GridTemplateColumns
max-content 1fr
.pf-c-masthead--pf-c-masthead__main--GridColumn
-1 / 1
.pf-c-masthead--pf-c-masthead__main--MinHeight
4.375rem
.pf-c-masthead--pf-c-masthead__main--Order
-1
.pf-c-masthead--pf-c-masthead__main--FlexBasis
100%
.pf-c-masthead--pf-c-masthead__main--PaddingTop
0.5rem
.pf-c-masthead--pf-c-masthead__main--PaddingBottom
0.5rem
.pf-c-masthead--pf-c-masthead__main--MarginRight
0
.pf-c-masthead--pf-c-masthead__main--before--BorderBottom
1px solid #6a6e73
.pf-c-masthead--pf-c-masthead__content--GridColumn
2
.pf-c-masthead--pf-c-masthead__content--MinHeight
auto
.pf-c-masthead--pf-c-masthead__content--Order
1
.pf-c-masthead--pf-c-masthead__content--PaddingTop
0
.pf-c-masthead--pf-c-masthead__content--PaddingBottom
0
.pf-c-masthead--pf-c-masthead__content--MarginLeft
0
.pf-c-masthead--pf-c-masthead__content--c-nav--m-horizontal--MarginRight
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft
calc(1rem * -1)
.pf-c-masthead .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#fff
.pf-c-masthead.pf-m-light--pf-c-masthead--BackgroundColor
#fff
.pf-c-masthead.pf-m-light--pf-c-masthead__main--BorderBottomColor
#f0f0f0
.pf-c-masthead .pf-c-toolbar--pf-c-toolbar__content--PaddingRight
0
.pf-c-masthead .pf-c-toolbar--pf-c-toolbar__content--PaddingLeft
0
.pf-c-masthead .pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingTop
1rem
.pf-c-masthead .pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingRight
1rem
.pf-c-masthead .pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingBottom
1rem
.pf-c-masthead .pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingLeft
1rem
.pf-c-masthead .pf-c-menu-toggle--pf-c-menu-toggle--before--BorderTopColor
#3c3f42
.pf-c-masthead .pf-c-menu-toggle--pf-c-menu-toggle--before--BorderRightColor
#3c3f42
.pf-c-masthead .pf-c-menu-toggle--pf-c-menu-toggle--before--BorderLeftColor
#3c3f42
.pf-c-masthead .pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--before--BorderTopColor
transparent
.pf-c-masthead .pf-c-menu-toggle.pf-m-full-height--pf-c-menu-toggle--before--BorderBottomColor
transparent
.pf-c-masthead .pf-c-context-selector--pf-c-context-selector--Width
auto
.pf-c-masthead .pf-c-context-selector--pf-c-context-selector__toggle--BorderTopColor
#3c3f42
.pf-c-masthead .pf-c-context-selector--pf-c-context-selector__toggle--BorderRightColor
#3c3f42
.pf-c-masthead .pf-c-context-selector--pf-c-context-selector__toggle--BorderLeftColor
#3c3f42
.pf-c-masthead .pf-c-context-selector.pf-m-full-height--pf-c-context-selector__toggle--BorderTopColor
transparent
.pf-c-masthead .pf-c-context-selector.pf-m-full-height--pf-c-context-selector__toggle--BorderBottomColor
transparent
.pf-c-masthead .pf-c-dropdown--pf-c-dropdown__toggle--before--BorderTopColor
#3c3f42
.pf-c-masthead .pf-c-dropdown--pf-c-dropdown__toggle--before--BorderRightColor
#3c3f42
.pf-c-masthead .pf-c-dropdown--pf-c-dropdown__toggle--before--BorderLeftColor
#3c3f42
.pf-c-masthead .pf-c-dropdown.pf-m-full-height--pf-c-dropdown__toggle--before--BorderTopColor
transparent
.pf-c-masthead .pf-c-dropdown.pf-m-full-height--pf-c-dropdown__toggle--before--BorderBottomColor
transparent
.pf-c-masthead__main:last-child--pf-c-masthead__main--MarginRight
0
.pf-c-masthead__content:only-child--pf-c-masthead__content--MarginLeft
0
.pf-c-masthead__toggle ~ .pf-c-masthead__content--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft
calc(0 * -1)
.pf-c-masthead__toggle .pf-c-button--pf-c-button--FontSize
1.5rem
.pf-c-masthead.pf-m-display-stack--pf-c-masthead--GridTemplateColumns
max-content 1fr
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--GridColumn
-1 / 1
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--MinHeight
4.375rem
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--Order
-1
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--FlexBasis
100%
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--PaddingTop
0.5rem
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--PaddingBottom
0.5rem
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--MarginRight
0
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--before--BorderBottom
1px solid #6a6e73
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--GridColumn
2
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--MinHeight
auto
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--Order
1
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--PaddingTop
0
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--PaddingBottom
0
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--MarginLeft
0
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--c-nav--m-horizontal--MarginRight
calc(1rem * -1)
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft
calc(1rem * -1)
.pf-c-masthead.pf-m-display-inline--pf-c-masthead--GridTemplateColumns
max-content max-content 1fr
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--GridColumn
2
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--MinHeight
4.375rem
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--Order
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--FlexBasis
auto
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--PaddingTop
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--PaddingBottom
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--MarginRight
calc(1.5rem / 2)
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--before--BorderBottom
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--GridColumn
3
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--MinHeight
4.375rem
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--Order
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--PaddingTop
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--PaddingBottom
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--MarginLeft
calc(1.5rem / 2)
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--c-nav--m-horizontal--MarginRight
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft
0
.pf-c-masthead.pf-m-inset-none--pf-c-masthead--inset
0
.pf-c-masthead.pf-m-inset-sm--pf-c-masthead--inset
0.5rem
.pf-c-masthead.pf-m-inset-md--pf-c-masthead--inset
1rem
.pf-c-masthead.pf-m-inset-lg--pf-c-masthead--inset
1.5rem
.pf-c-masthead.pf-m-inset-xl--pf-c-masthead--inset
2rem
.pf-c-masthead.pf-m-inset-2xl--pf-c-masthead--inset
3rem

View source on GitHub