Masthead

A masthead contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application.

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

Basic with mixed content

Display inline

Display stack

Display stack, display inline responsive

Inset

With icon router link

Props

Masthead

*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

MastheadToggle

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside of the masthead toggle.
className	string		Additional classes added to the masthead toggle.

MastheadMain

*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.

MastheadBrand

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside of the masthead brand.
className	string		Additional classes added to the masthead brand.

MastheadLogo

*required
Name	Type	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

*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.

CSS variables

Expand or collapse column	Selector	Variable	Value

View source on GitHub