Layouts
Nav Shell
A full-page top-navigation layout: a sticky header bar with brand, inline navigation, and actions above a scrollable content region. On mobile the inline nav collapses into a hamburger-triggered drawer. Use for marketing sites and top-nav applications.
Structure Diagram
NavShellBrandNavShellNavItem (active)
NavShellNavItem
NavShellActions
NavShellMain (scrollable)
The inline NavShellNav is hidden below the md breakpoint, where NavShellMobileNav renders a hamburger that opens a drawer with the same links. Resize the browser to see the switch.
NavShell Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the shell container. |
The same className passthrough applies to NavShellHeader, NavShellBrand, NavShellNav, NavShellActions, and NavShellMain.
NavShellNavItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | React.ComponentType<{ className?: string }> | — | Optional icon component rendered before the label. |
active | boolean | false | Whether this item represents the current page. |
href | string | — | The link destination for the navigation item. |
NavShellMobileNav Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Navigation" | Accessible title shown at the top of the mobile drawer. |
triggerLabel | string | "Open navigation menu" | Accessible label for the hamburger trigger button. |