Sidebar

Composable sidebar system supporting collapsible modes, icon-only collapse, sub-menus, badges, and flexible layout composition.

When To Use

Use Sidebar when content needs to appear in context without forcing a full page transition.
Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
Review the examples below to compare trigger styles, content density, and dismissal expectations.

Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Move focus into the overlay when it opens and return focus to the trigger when it closes.
Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.

Props

defaultOpen, open, onOpenChange, side, variant, collapsible

Key exports

SidebarProvider, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction

With sub-menus

Nested navigation with sub-items under Projects, hidden in collapsed state

Icon-only collapsed

Sidebar starts collapsed — icons shown with tooltips, more content space