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


import MastheadBasic from "./MastheadBasic.tsx?raw"

<LiveExample src={MastheadBasic} />

### Basic with mixed content


import MastheadBasicMixedContent from "./MastheadBasicMixedContent.tsx?raw"

<LiveExample src={MastheadBasicMixedContent} />

### Display inline


import MastheadDisplayInline from "./MastheadDisplayInline.tsx?raw"

<LiveExample src={MastheadDisplayInline} />

### Display stack


import MastheadDisplayStack from "./MastheadDisplayStack.tsx?raw"

<LiveExample src={MastheadDisplayStack} />

### Display stack, display inline responsive


import MastheadDisplayStackInlineResponsive from "./MastheadDisplayStackInlineResponsive.tsx?raw"

<LiveExample src={MastheadDisplayStackInlineResponsive} />

### Inset


import MastheadInsets from "./MastheadInsets.tsx?raw"

<LiveExample src={MastheadInsets} />

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



import MastheadLogoCustomComponent from "./MastheadLogoCustomComponent.tsx?raw"

<LiveExample src={MastheadLogoCustomComponent} />

## 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](#custom-logo-component) and pass a callback to the `component` property of the `MastheadLogo`:

```
<MastheadLogo component={(props) => <Link {...props} to="#" />}>
  <Brand ...brandProps />
</MastheadLogo>
```