Components

Sidebar

A composable, collapsible application navigation panel with header, footer, grouped menus, badges, tooltips, and a built-in keyboard shortcut — assembled from a set of primitives around a single SidebarProvider.

Basic usage

Wrap everything in SidebarProvider, then compose a Sidebar alongside your page content in SidebarInset. Click the trigger to collapse to an icon rail.

Dashboard
Toggle the sidebar with the trigger or press ⌘ B.

Variants & collapse modes

The variant prop controls the chrome (sidebar, floating, inset) and collapsible controls how it disappears (offcanvas, icon, none).

Projects

Anatomy

A sidebar is assembled from regions: SidebarHeader, scrollable SidebarContent holding one or more SidebarGroups, and a pinned SidebarFooter. Menus use SidebarMenu / SidebarMenuItem / SidebarMenuButton, optionally with SidebarMenuBadge.

Props

PropTypeDefaultDescription
SidebarProviderComponent—Required wrapper that provides open/collapsed state, the cmd/ctrl+B keyboard shortcut, mobile detection, and the TooltipProvider. Accepts defaultOpen, open, and onOpenChange.
defaultOpenbooleantrueInitial expanded state of the sidebar (uncontrolled). Set on SidebarProvider.
open / onOpenChangeboolean / (open: boolean) => void—Controlled open state and change handler on SidebarProvider.
side'left' | 'right''left'Which edge the Sidebar is anchored to.
variant'sidebar' | 'floating' | 'inset''sidebar'Visual treatment — flush to the edge, a floating rounded card, or an inset panel paired with SidebarInset.
collapsible'offcanvas' | 'icon' | 'none''offcanvas'How the Sidebar collapses: slides off-canvas, shrinks to an icon rail, or stays fixed.
SidebarMenuButtonComponent—Interactive menu row. Props: isActive, variant ("default" | "outline"), size ("default" | "sm" | "lg"), tooltip (shown when collapsed to icon), and asChild to render as a link.
SidebarTriggerComponent—Ghost icon button that calls toggleSidebar. Place it inside SidebarInset or any descendant of SidebarProvider.
useSidebar()hook—Returns { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } for custom controls.

Accessibility

  • The whole panel can be toggled from the keyboard with ⌘/Ctrl + B, registered globally by SidebarProvider.
  • SidebarTrigger renders a real <button> with a visually-hidden “Toggle Sidebar” label, so it is announced even though it shows only an icon.
  • Menus are semantic lists (<ul> / <li>); the active row is marked with data-active and every interactive element exposes a focus-visible ring.
  • When collapsed to the icon rail, each SidebarMenuButton with a tooltip reveals its label on hover and focus, preserving wayfinding without visible text.
  • On mobile the sidebar renders inside a Radix Sheet with a screen-reader title and description, giving it dialog semantics and focus trapping.