Sidebar

Feature-rich collapsible sidebar with provider, menus, groups, and sub-navigation.

Default

A sidebar with grouped navigation items wrapping a main content area.

Installation

npx visor add sidebar

This copies two files into your project:

components/ui/sidebar/sidebar.tsx — the component
components/ui/sidebar/sidebar.module.css — the styles

Usage

import {
  SidebarProvider, Sidebar, SidebarHeader, SidebarContent,
  SidebarGroup, SidebarGroupLabel, SidebarGroupContent,
  SidebarMenu, SidebarMenuItem, SidebarMenuButton,
  SidebarFooter, SidebarInset,
} from '@/components/ui/sidebar/sidebar';

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <h2>My App</h2>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive>Dashboard</SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <main>Page content</main>
  </SidebarInset>
</SidebarProvider>

A rail is a Sidebar collapsed to icons. Give it position="contained" so it lays out inside its parent and sits under an app bar; the default fixed pins it to the viewport at full height and would cover the bar. Override the provider's min-height (it defaults to 100svh) with style or className.

<SidebarProvider defaultOpen={false} style={{ minHeight: 0, flex: 1 }}>
  <Sidebar collapsible="icon" position="contained">
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton asChild tooltip="Inbox">
          <Link href="/inbox"><Tray /></Link>
        </SidebarMenuButton>
        <SidebarMenuBadge aria-hidden="true" />
      </SidebarMenuItem>
    </SidebarMenu>
  </Sidebar>
</SidebarProvider>

asChild renders the child (a Next <Link>, an <a>) as the item through Radix Slot, keeping the button treatment and data-* hooks. SidebarMenuBadge stays a sibling in the <li>, so it positions the same way.
tooltip is a string, or an object of TooltipContent props (children, side, container). It shows when the sidebar is collapsed to icons (collapsible="icon") and for collapsible="none" rails (a static rail has no collapsed state, so passing tooltip is the opt-in). It never shows on mobile or in an expanded sidebar. A string also becomes the button's aria-label while the rail is icon-only, unless you set aria-label or aria-labelledby yourself.
The tooltip portals into the Sidebar element, so a class-scoped theme on an ancestor reaches it. Pass container to override. SidebarProvider includes a TooltipProvider.
keyboardShortcut on SidebarProvider (default true) controls Cmd/Ctrl+B. The binding is skipped, with no preventDefault, while only collapsible="none" sidebars are mounted. Pass false to never bind it.

Sub-components

Component	Element	Purpose
`SidebarProvider`	`<div>`	Context provider managing state, mobile detection, and keyboard shortcuts.
`Sidebar`	`<div>`	The sidebar container with `side`, `variant`, and `collapsible` props.
`SidebarTrigger`	`<button>`	Button that toggles sidebar open/closed.
`SidebarRail`	`<button>`	Clickable rail at the sidebar edge for toggling.
`SidebarInset`	`<main>`	Main content area companion to the sidebar.
`SidebarHeader`	`<div>`	Top section for branding or user info.
`SidebarFooter`	`<div>`	Bottom section for settings or user actions.
`SidebarContent`	`<div>`	Scrollable content area between header and footer.
`SidebarGroup`	`<div>`	Visual grouping of related menu items.
`SidebarGroupLabel`	`<div>`	Heading label for a group.
`SidebarGroupAction`	`<button>`	Action button in a group header.
`SidebarGroupContent`	`<div>`	Content container within a group.
`SidebarMenu`	`<ul>`	List container for menu items.
`SidebarMenuItem`	`<li>`	Individual menu list item.
`SidebarMenuButton`	`<button>`	Interactive button with active state and tooltip support.
`SidebarMenuAction`	`<button>`	Secondary action (e.g., more options) on a menu item.
`SidebarMenuBadge`	`<div>`	Badge indicator (e.g., notification count).
`SidebarMenuSub`	`<ul>`	Nested sub-menu list.
`SidebarMenuSubItem`	`<li>`	Sub-menu list item.
`SidebarMenuSubButton`	`<a>`	Interactive link/button within a sub-menu item.
`SidebarSeparator`	`<hr>`	Horizontal divider between sections.

Accessibility

Toggle keyboard shortcut: Cmd+B (macOS) / Ctrl+B (Windows/Linux). Turn it off with keyboardShortcut={false}; it is skipped for collapsible="none".
Menu items use semantic <ul> / <li> structure.
SidebarMenuButton supports isActive for aria-current indication.
Collapsible modes (offcanvas, icon-only) preserve accessible labels: SidebarMenuButton's tooltip string names the button while the label is hidden.

Sidebar

Default

Installation

Usage

API Reference

SidebarProps

Icon rail under an app bar

Sub-components

Accessibility

On this page