Masthead.md

id	Masthead
section	components
cssPrefix	pf-v6-c-masthead
propComponents	Masthead MastheadToggle MastheadMain MastheadBrand MastheadLogo MastheadContent

import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-menu-bars-icon'; import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';

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

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.

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>