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>.
Display stack, display inline responsive
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>
*required
| 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 |
| variant Beta | 'default' | 'docked' | 'default' | Indicates the variant of the masthead |
*required
| Name | Type | Default | Description |
|---|
| children | React.ReactNode | | Content rendered inside of the masthead toggle. |
| className | string | | Additional classes added to the masthead toggle. |
*required
| Name | Type | Default | Description |
|---|
| children | React.ReactNode | | Content rendered inside of the masthead main block. |
| className | string | | Additional classes added to the masthead main. |
*required
| Name | Type | Default | Description |
|---|
| children | React.ReactNode | | Content rendered inside of the masthead brand. |
| className | string | | Additional classes added to the masthead brand. |
*required
| 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. |
| isCompact Beta | boolean | false | Flag indicating the logo is a compact variant. Used in docked layouts. |
*required
| Name | Type | Default | Description |
|---|
| children | React.ReactNode | | Content rendered inside of the masthead content block. |
| className | string | | Additional classes added to the masthead content. |
