Navigation/Sidebar

Sidebar

A composable, themeable and customizable sidebar component.

Themed

When to Use

Use Sidebar when you need to:

  • Provide persistent application-level navigation across multiple pages
  • Organize a large number of navigation items into grouped sections
  • Display contextual tools or filters alongside primary content
  • Create a collapsible navigation rail that can shrink to icons on desktop
  • Build dashboard layouts with multi-level menu hierarchies

When Not to Use

  • Simple top-level navigation with few links - use Navigation Menu
  • Temporary overlays for settings or details - use Sheet or Drawer
  • Mobile-only slide-out panels - use Sheet directly
  • In-page section navigation - use Tabs

Default

A collapsible sidebar with smooth natural animation and grouped menu items.

Natural

Click the button or use ⌘B to toggle

Natural Animation

Smooth ease-out animation that feels organic (400ms).

Natural

Click the button or use ⌘B to toggle

Rubber Band Animation

Bouncy overshoot effect for a playful, energetic feel (500ms).

Rubber Band

Click the button or use ⌘B to toggle

Snappy Animation

Quick, minimal easing for a very responsive feel (150ms).

Snappy

Click the button or use ⌘B to toggle

Spring Animation

Subtle spring physics with an iOS-like settle effect (400ms).

Spring

Click the button or use ⌘B to toggle

Bounce Animation

Pronounced bounce with decay for a dramatic effect (600ms).

Bounce

Click the button or use ⌘B to toggle

Gentle Animation

Smooth and slow for a calming, deliberate feel (500ms).

Gentle

Click the button or use ⌘B to toggle

Animation Variants Overview

Quick reference for all available animation styles and their characteristics.

natural

Smooth ease-out

rubber-band

Bouncy overshoot

snappy

Quick & responsive

spring

iOS-like spring

bounce

Pronounced bounce

gentle

Slow & calming

UX & Design Guidelines

Visual Hierarchy

Use SidebarGroupLabel to create clear category headings. Highlight the active route with isActive on SidebarMenuButton using bg-sidebar-accent. Limit top-level groups to 5-7 for scannability. Use SidebarMenuSub for nested items.

Spacing & Layout

The sidebar defaults to 16rem width and 3rem when collapsed to icons. Use SidebarHeader for branding or user info and SidebarFooter for settings or account actions. Content in SidebarInset automatically adjusts its margin.

Responsive Behavior

On mobile (<768px), the sidebar renders as a Sheet overlay at 18rem width. The SidebarTrigger provides a hamburger-style toggle. Use collapsible="icon" on desktop to allow users to reclaim horizontal space while keeping navigation accessible.

Color & Theming

The sidebar uses dedicated semantic tokens: bg-sidebar, text-sidebar-foreground, and bg-sidebar-accent for hover/active states. The floating variant adds border-sidebar-border with rounded corners and shadow for a detached appearance.

Accessibility

Keyboard Navigation

  • Cmd + B (Mac) or Ctrl + B (Windows) — Toggle sidebar open/closed
  • Tab — Move focus through sidebar menu items sequentially
  • Enter or Space — Activate the focused menu button or trigger
  • Escape — Close the mobile sidebar sheet overlay

Screen Reader Support

  • The SidebarTrigger includes sr-only text announcing "Toggle Sidebar"
  • Mobile sheet includes hidden SheetTitle and SheetDescription for screen readers
  • Menu items with asChild preserve native link semantics and announcements
  • Active state is conveyed via data-active attribute styling

Focus Management

Focus ring uses focus-visible:ring-2 with the ring-sidebar-ring token. When the sidebar opens on mobile, focus is trapped within the Sheet overlay. The SidebarRail uses tabIndex=-1 to prevent accidental focus on the resize handle.

Tooltips in Collapsed State

When collapsed to collapsible="icon", menu buttons with a tooltip prop display their label on hover. Tooltips are automatically hidden when the sidebar is expanded or on mobile.

ARIA Attributes

{/* Sidebar with navigation landmark */}
<Sidebar aria-label="Main navigation">
  <SidebarContent>
    <SidebarGroup>
      <SidebarGroupLabel>Navigation</SidebarGroupLabel>
      <SidebarGroupContent>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton asChild>
              <a href="/dashboard">Dashboard</a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  </SidebarContent>
</Sidebar>

{/* Trigger with accessible label */}
<SidebarTrigger aria-label="Toggle sidebar" />

{/* Menu button with tooltip for collapsed state */}
<SidebarMenuButton tooltip="Dashboard">
  <LayoutDashboard />
  <span>Dashboard</span>
</SidebarMenuButton>

Related Components

Sheet

Slide-out overlay panel used by the sidebar on mobile viewports.

Navigation Menu

Horizontal navigation links for top-level site navigation.

Drawer

Edge-anchored panel for temporary content and actions.

Collapsible

Expand/collapse content sections, often used within sidebar groups.

API Reference

The Sidebar system is composed of multiple components. Below are the primary props for each.

SidebarProvider

Manages sidebar state, animation, and keyboard shortcut. Wraps the entire sidebar layout.

PropTypeDefaultDescription
defaultOpenbooleantrueDefault open state of the sidebar (uncontrolled).
openboolean—Controlled open state of the sidebar.
onOpenChange(open: boolean) => void—Event handler called when open state changes.
animation"natural" | "rubber-band" | "snappy" | "spring" | "bounce" | "gentle""natural"Animation style for sidebar open/close transitions.

Sidebar

The main sidebar container. Renders as a Sheet on mobile and a fixed panel on desktop.

PropTypeDefaultDescription
side"left" | "right""left"Which side of the screen the sidebar appears on.
variant"sidebar" | "floating" | "inset""sidebar"Visual variant of the sidebar container.
collapsible"offcanvas" | "icon" | "none""offcanvas"Collapse behavior: slide off, shrink to icons, or always visible.

SidebarMenuButton

Interactive menu item button with variant, size, active state, and collapsed-mode tooltip support.

PropTypeDefaultDescription
variant"default" | "outline""default"Visual style variant of the menu button.
size"default" | "sm" | "lg""default"The size of the menu button.
asChildbooleanfalseRender child as root element, merging props and behavior.
isActivebooleanfalseWhether the menu item is in an active/selected state.
tooltipstring | TooltipContentProps—Tooltip shown when sidebar is collapsed to icon mode.