Dashboard Shell
A full-page top + side navigation layout: a full-width header bar above a fixed sidebar and scrollable main region — the classic admin dashboard. It reuses the AppShell sidebar parts, so the sidebar collapses into a drawer on mobile via AppShellSidebarTrigger placed in the header.
Structure Diagram
DashboardShellBrandDashboardShellActions
AppShellNavItem (active)
AppShellNavItem
AppShellFooter
PageHeaderPageBody (scrollable)
The top bar spans the full width; the sidebar sits below it. Below the md breakpoint the sidebar hides and the AppShellSidebarTrigger in the header opens it as a drawer. Sidebar, nav, and main come from the AppShell family — see App Shell for their props.
DashboardShell Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the shell container. |
The same className passthrough applies to DashboardShellHeader, DashboardShellBrand, DashboardShellActions, and DashboardShellBody.