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
.
*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 |
*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. |
component | React.ElementType<any> | React.ComponentType<any> | | Component type of the masthead brand. |
*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. |
Expand or collapse column | Selector | Variable | Value |
---|
View source on GitHub