Sidebar
Last Updated: September 2026Sidebars provide primary or secondary app navigation with header, content, and footer regions.
Source CodeAnatomy
link- 1Header
- 2Menu item
- 3Group
- 4Footer
Variants
linkPrimary
Default app sidebar spacing and accent-active menu styling.
Secondary
Compact spacing, muted icons, and quieter active states.
With badge
Sidebar.Item.StatusBadge variant new | beta — expands on hover.
Grouped sections
Sidebar.Group.Label toggles Sidebar.Group.Content with nested menu items.
With separator
Sidebar.Separator divides peer menu blocks inside Sidebar.Content.
Usage Guidelines
linkWhen to use
- •As the primary or secondary navigation chrome for an application shell.
- •When header, scrollable content, and footer regions need a consistent frame.
- •With Sidebar.Menu items, badges, and nested Sidebar.Group sections.
When not to use
- •For temporary overlays — use Drawer or Modal.
- •For horizontal page tabs — use Tab Menu.
- •As a generic card layout — use Card and Stack.
Give the sidebar a fixed height parent so Sidebar.Content can scroll.
Don't put free text as Sidebar.Item children — use Icon and Label slots.
Mark the current destination with isActive on exactly one item.
Don't use Sidebar for temporary overlays — use Drawer or Modal instead.
Behaviors
linkLayout regions
- •Compose Sidebar.Header, Sidebar.Content, and Sidebar.Footer as direct children.
- •Sidebar.Content scrolls; primary variant shows top/bottom scroll shadows when overflowed.
- •Width follows --panel-width (18rem fallback); Sidebar is h-full so the parent sets height.
Menu items
- •Sidebar.Item collects Icon, Label, and Badge via slots.
- •isActive styles the current route; size is sm | md (default md).
- •Badge variant is new | beta and reveals its label on hover.
Groups and resize
- •Sidebar.Group is a Collapsible — Label toggles Content.
- •Wrap in ResizablePanel in product shells for drag-resize/collapse (not required for static layouts).
Content Guidelines
linkLabels
- •Keep menu labels short and parallel (nouns or short phrases).
- •Group related destinations under a clear Sidebar.Group.Label.
Badges
- •Use new / beta sparingly for feature discovery — not for unread counts.
- •Prefer synthetic demo labels; avoid real clinic or patient names in docs.
Accessibility
linkText & Labels
- •Every Sidebar.Item needs a visible Label (or equivalent accessible name via render).
- •Group labels should describe the section, not repeat every child.
ARIA attributes
- •Sidebar.Group uses Base UI Collapsible for expand/collapse.
- •Menu items render as buttons by default; use render to polymorph into links.
Keyboard Support
- •Tab moves through header controls, menu items, and group triggers.
- •Enter / Space activates a menu item or toggles a group label.
WCAG Compliance Standards
FAQs
linkHow do I build a menu row?
Use Sidebar.Item with Sidebar.Item.Icon, Sidebar.Item.Label, and optional Sidebar.Item.StatusBadge as children — slots are collected automatically.
Primary vs secondary?
variant="primary" (default) uses accent active styles and denser padding. variant="secondary" is quieter with muted icons — good for nested or secondary chrome.
Why wrap previews in a height-constrained div?
Sidebar is h-full. Without a parent height, content and footer layout won't match the app shell.