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
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.
Content
Using router links
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
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside of the masthead | |
| className | string | Additional 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
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside of the masthead toggle. | |
| className | string | Additional classes added to the masthead toggle. |
MastheadMain
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside of the masthead main block. | |
| className | string | Additional classes added to the masthead main. |
MastheadBrand
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside of the masthead brand. | |
| className | string | Additional classes added to the masthead brand. |
MastheadLogo
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside of the masthead logo. | |
| className | string | Additional classes added to the masthead logo. | |
| component | React.ElementType<any> | React.ComponentType<any> | Component type of the masthead logo. |
MastheadContent
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside of the masthead content block. | |
| className | string | Additional classes added to the masthead content. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .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 | ||
| ||||