Sidebar

Layout

A composable, collapsible, and responsive sidebar layout with workspace switching, nested navigation, and user profiles.

Import

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
  SidebarInset,
} from "@/components/ui/sidebar"

Usage

Application Shell

A truly responsive application shell. Use the viewport toggle below to see how the sidebar adapts: Desktop shows full sidebar, Tablet shows icon-only mode, and Mobile shows a hamburger menu with slide-out drawer.

API Reference

collapsible"offcanvas"

"offcanvas" | "icon" | "none"

How the sidebar handles collapsing. Use 'icon' for icon-only mode.

side"left"

"left" | "right"

Which side of the screen the sidebar appears on

variant"sidebar"

"sidebar" | "floating" | "inset"

The visual variant of the sidebar

Prop	Type	Default	Description
`collapsible`	`"offcanvas" \| "icon" \| "none"`	"offcanvas"	How the sidebar handles collapsing. Use 'icon' for icon-only mode.
`side`	`"left" \| "right"`	"left"	Which side of the screen the sidebar appears on
`variant`	`"sidebar" \| "floating" \| "inset"`	"sidebar"	The visual variant of the sidebar