Layouts
App Shell
A full-page side-navigation layout: a fixed sidebar with logo, navigation, and footer beside a scrollable main region. On mobile the sidebar collapses into a drawer opened by AppShellSidebarTrigger. Use as the root layout for dashboard-style applications.
Structure Diagram
AppShellLogoAppShellNavItem (active)
AppShellNavItem
AppShellNavItem
AppShellFooter
PageHeaderPageBody (scrollable)
AppShell Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the app shell container. |
AppShellSidebar Props
| Prop | Type | Default | Description |
|---|---|---|---|
collapsed | boolean | false | Whether the sidebar is in collapsed state. |
mobileTitle | string | "Navigation" | Accessible title for the mobile drawer, announced to screen readers. |
className | string | — | Additional CSS classes to apply to the sidebar. |
AppShellNavItem 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. |
Responsive Behavior
On md and larger the sidebar is a fixed column. Below md it is hidden and its contents are mirrored into a drawer. Render an AppShellSidebarTrigger somewhere always-visible on mobile (typically inside your PageHeader) to open it. The trigger is itself hidden on md+, so it never shows on desktop.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional classes. The trigger is hidden on md+ by default (md:hidden). |