Masthead

To maintain proper layout and formatting, a <Masthead> should contain both a <MastheadMain> and <MastheadContent> component.

Mastheads contain the <MastheadMain> that wraps a <PageToggleButton> and <MastheadBrand>. The <MastheadBrand> wraps <MastheadLogo>. The masthead also contains the page's header toolbar within <MastheadContent>.

Examples

Basic

Content

Basic with mixed content

Content

Display inline

Content

Display stack

Content

Display stack, display inline responsive

Content

Inset

Content

Custom logo component

In addition to being able to pass a string to the component property of MastheadLogo, you can provide more fine-tuned customization by passing a callback that returns a component.

Router links can be used for in-app linking in React environments to prevent page reloading. To use a Link component from a router package, you can follow our custom logo component example and pass a callback to the component property of the MastheadLogo:

<MastheadLogo component={(props) => <Link {...props} to="#" />}>
  <Brand ...brandProps />
</MastheadLogo>

Props

Masthead

*required
NameTypeDefaultDescription
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.
*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside of the masthead logo.
classNamestringAdditional classes added to the masthead logo.
componentReact.ElementType<any> | React.ComponentType<any>Component type of the masthead logo.

MastheadContent

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

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-masthead--pf-v6-c-masthead--RowGap
0.5rem
.pf-v6-c-masthead--pf-v6-c-masthead--ColumnGap
1rem
.pf-v6-c-masthead--pf-v6-c-masthead--BorderWidth
1px
.pf-v6-c-masthead--pf-v6-c-masthead--PaddingBlock
1rem
.pf-v6-c-masthead--pf-v6-c-masthead--PaddingInline
1.5rem
.pf-v6-c-masthead--pf-v6-c-masthead--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-masthead--pf-v6-c-masthead--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-masthead--pf-v6-c-masthead__main--ColumnGap
unset
.pf-v6-c-masthead--pf-v6-c-masthead__main--MarginInlineEnd
1.5rem
.pf-v6-c-masthead--pf-v6-c-masthead__logo--MaxHeight
2.375rem
.pf-v6-c-masthead--pf-v6-c-masthead__logo--Width
11.8125rem
.pf-v6-c-masthead--pf-v6-c-masthead__toggle--Size
1.5rem
.pf-v6-c-masthead--pf-v6-c-masthead__content--ColumnGap
1rem
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-stack--ColumnGap
1rem
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-stack--GridTemplateColumns
max-content 1fr
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-stack__brand--GridColumn
-1 / 1
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-stack__brand--Order
-1
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd
0.5rem
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd
1px solid #c7c7c7
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-stack__content--GridColumn
1
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-stack__content--Order
1
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn
2
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-stack__main--Display
contents
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-stack__main--ColumnGap
unset
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline--ColumnGap
0
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline--GridTemplateColumns
min-content 1fr
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns
subgrid
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline__brand--GridColumn
initial
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline__brand--Order
initial
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd
0
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd
0
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline__main--GridColumn
1
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline__content--GridColumn
2
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline__content--Order
0
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn
2
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline__main--Display
flex
.pf-v6-c-masthead--pf-v6-c-masthead--m-display-inline__main--ColumnGap
1rem
.pf-v6-c-masthead--pf-v6-c-masthead__expandable-content--BoxShadow
0px 10px 9px -8px rgba(41, 41, 41, 0.1500)
.pf-v6-c-masthead--pf-v6-c-masthead__expandable-content--BorderBlockStart
1px solid #c7c7c7
.pf-v6-c-masthead--pf-v6-c-masthead--c-toolbar--Width
100%
.pf-v6-c-masthead--pf-v6-c-masthead--c-toolbar--PaddingBlock
0
.pf-v6-c-masthead--pf-v6-c-masthead--GridTemplateColumns
max-content 1fr
.pf-v6-c-masthead--pf-v6-c-masthead__brand--GridColumn
-1 / 1
.pf-v6-c-masthead--pf-v6-c-masthead__brand--Order
-1
.pf-v6-c-masthead--pf-v6-c-masthead__brand--PaddingBlockEnd
0.5rem
.pf-v6-c-masthead--pf-v6-c-masthead__brand--BorderBlockEnd
1px solid #c7c7c7
.pf-v6-c-masthead--pf-v6-c-masthead__main--GridColumn
unset
.pf-v6-c-masthead--pf-v6-c-masthead__content--GridColumn
1
.pf-v6-c-masthead--pf-v6-c-masthead__content--Order
1
.pf-v6-c-masthead--pf-v6-c-masthead__main--toggle--content--GridColumn
2
.pf-v6-c-masthead--pf-v6-c-masthead__main--Display
contents
.pf-v6-c-masthead .pf-v6-c-toolbar--pf-v6-c-toolbar--Width
100%
.pf-v6-c-masthead .pf-v6-c-toolbar--pf-v6-c-toolbar--PaddingBlockEnd
0
.pf-v6-c-masthead .pf-v6-c-toolbar--pf-v6-c-toolbar__content--MinWidth
0
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead--ColumnGap
1rem
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead--GridTemplateColumns
max-content 1fr
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__brand--GridColumn
-1 / 1
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__brand--Order
-1
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__brand--PaddingBlockEnd
0.5rem
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__brand--BorderBlockEnd
1px solid #c7c7c7
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__main--GridColumn
unset
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__content--GridColumn
1
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__content--Order
1
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__main--toggle--content--GridColumn
2
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__main--Display
contents
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__main--ColumnGap
unset
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead--ColumnGap
0
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead--GridTemplateColumns
min-content 1fr
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__brand--GridColumn
initial
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__brand--Order
initial
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__brand--PaddingBlockEnd
0
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__brand--BorderBlockEnd
0
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__main--GridColumn
1
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__content--GridColumn
2
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__content--Order
0
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__main--toggle--content--GridColumn
2
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__main--Display
flex
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__main--ColumnGap
1rem
.pf-v6-c-masthead__main:has(.pf-v6-c-masthead__toggle) ~ .pf-v6-c-masthead__content--pf-v6-c-masthead__content--GridColumn
2
.pf-v6-c-masthead__toggle--pf-v6-c-button--FontSize
1.5rem