Sidebar
Sidebar primitive — fixed-position panel, permanent on desktop and overlay on mobile. Use directly for detail panels and custom shells. For a standard application chrome (left rail + mobile hamburger), use SidebarLayout.
Looking for an app shell?
For the common pattern of a permanent left sidebar with a mobile hamburger and an offset main content area, prefer SidebarLayout. It wraps this primitive and resolves the CSS-variable scoping that otherwise leaves your main content underneath the sidebar.
Use the Sidebar primitive directly for right-side detail
panels, custom shells, or any sidebar that opens as an overlay on click.
01 When to use
Sidebar is an <aside> landmark for a side panel that is part of the page layout. Use it for persistent app navigation that slides in as an
overlay on mobile (mode="responsive") or width-collapses at all viewports (mode="collapsible"). On desktop there is no backdrop — the panel sits alongside the main content.
Pick a different overlay if you need:
- A ready-made app shell with mobile hamburger, header slot, and centered content column → SidebarLayout.
- A transient detail panel that pulls focus (backdrop + focus-trap, opens on click, closes after action) → Drawer.
- A floating panel anchored to a specific element (date picker, action menu, autocomplete) → Popover.
02 Examples
Right-Side Detail Panel
03 Customization
Branded Sidebar
04 Accessibility
Semantic Landmark
Renders as an <aside> element, which screen
readers announce as a complementary landmark. When the sidebar is closed (mobile overlay
dismissed, or collapsible mode closed), aria-hidden="true" is applied to remove it from the accessibility
tree.
Keyboard
Escape closes the mobile overlay (configurable via closeOnEscape). Backdrop click dismiss is
configurable via closeOnBackdropClick.
Responsive Behavior
In responsive mode (default): on desktop (≥1024px)
the sidebar is always visible as a fixed panel — the open prop only controls the mobile overlay. Below 1024px
it slides in as an overlay with backdrop and body scroll lock.
In collapsible mode: the open prop controls the sidebar at all viewports. On
desktop it animates its width (no backdrop or scroll lock). On mobile it behaves as an
overlay like responsive mode. Use --sidebar-effective-width (0px when closed, full width
when open) to transition your main content offset.
Reduced Motion
Slide and width transitions use CSS custom property durations that respect prefers-reduced-motion via the design token system.
05 API Reference
No matching properties |