SidebarLayout
App-shell layout for permanent-on-desktop / overlay-on-mobile sidebars. Wraps the Sidebar primitive, exposes --sidebar-width on the layout root so the main content offset works without boilerplate, and renders an optional mobile header with a hamburger opener.
The documentation site you are reading now is itself wrapped in SidebarLayout. Resize your viewport below 1024px to see
the mobile hamburger header in action — the sidebar becomes a slide-in overlay with a
backdrop, and the main column reflows to full width.
For non-shell sidebars (right-side detail panels, drawers inside a page), use the Sidebar primitive directly.
01 When to use
SidebarLayout is the ready-made app shell — it wires a Sidebar, a
centered main column, and an optional mobile header into a responsive layout. Use it when you
want a permanent sidebar on desktop with a hamburger overlay on mobile and you don't want to
write the surrounding grid yourself. The component exposes --sidebar-width and --sidebar-effective-width on its root so the main-content
offset animates in lockstep with the sidebar.
Pick a different layout or overlay if you need:
- A custom outer grid (multi-region layout, header bar with brand controls, full bleed sections) — build it yourself with the Sidebar primitive directly.
- A transient detail panel that pulls focus (backdrop + focus-trap) → Drawer.
- A floating panel anchored to a specific element → Popover.
See the Dashboard recipe for a full app-shell demonstration.
02 Examples
Default app shell
Grouped navigation with active state
Collapsible mode (toggle on all viewports)
Right-side rail
03 Customization
Branded shell via slotClasses
Reusable preset via BlocksProvider
Wider content column
04 Accessibility
Skip-link target
The main column is rendered as <main id="main-content">, so a global skip-link with href="#main-content" jumps straight to the page content.
Sidebar landmark
Inherits the Sidebar primitive's behavior: rendered
as <aside> and marked aria-hidden="true" while the mobile overlay is closed.
Mobile overlay
Body scroll is locked while the overlay is open. Pressing Escape closes the overlay (configurable via closeOnEscape), and a backdrop click also dismisses
it (configurable via closeOnBackdropClick).
Reduced motion
The padding-transition on the main column uses the design system's --blocks-duration-normal and --blocks-ease-confident tokens, which respect prefers-reduced-motion.
05 API Reference
No matching properties |