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
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. | |
| component | React.ElementType<any> | React.ComponentType<any> | Component type of the masthead brand. |
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 |
|---|
