Components

Sidebar

Shadcn

A composable, themeable and customizable sidebar component.

Structure

  • Sidebar.Provider - Handles collapsible state
  • Sidebar.Root - The sidebar container
  • Sidebar.Header / Sidebar.Footer - Sticky header/footer
  • Sidebar.Content - Scrollable content
  • Sidebar.Group - Section within content
  • Sidebar.Menu - Menu items container
  • Sidebar.Trigger - Toggle button
  • Sidebar.Inset - Main content wrapper

Basic Usage

This page itself uses the Sidebar component. Check the layout for a live example.

Sidebar.Root Props

PropTypeDescription
side"left" | "right"The side of the sidebar
variant"sidebar" | "floating" | "inset"The variant of the sidebar
collapsible"offcanvas" | "icon" | "none"Collapsible state

Menu Items

Application
Home Inbox Calendar Search Settings

Theming

The Sidebar uses dedicated CSS variables for independent theming:

  • --sidebar
  • --sidebar-foreground
  • --sidebar-primary
  • --sidebar-primary-foreground
  • --sidebar-accent
  • --sidebar-accent-foreground
  • --sidebar-border
  • --sidebar-ring