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>

API Reference

SidebarProps

No props data available for “sidebar”.

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).
Menu items use semantic <ul> / <li> structure.
SidebarMenuButton supports isActive for aria-current indication.
Collapsible modes (offcanvas, icon-only) preserve accessible labels via tooltips.