Components
Sidebar
The app menu: sections, sub-pages, collapsing to icons, a sheet on phones.
Preview
The menu on the left of this page is the sidebar. On a phone it opens as a sheet.
import { Sidebar, SidebarContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "@/components/ui/sidebar";Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add sidebarProps
The ones that change how it looks or behaves. The rest are the HTML element's own.
| Prop | Type | Default |
|---|---|---|
| side | "left" | "right" | "left" |
| variant | "sidebar" | "floating" | "inset" | "sidebar" |
| collapsible | "offcanvas" | "icon" | "none" | "offcanvas" |
Guidelines
Use it
- Through components/sidebar-nav.tsx, drawn from lib/nav.ts. A section with sub-pages opens its first one.
Don't
- Add a second menu inside a page for the same sub-pages.
Used in
The screens in this Base that show it, found in the code.
- The app shell, on every screen
Accessibility
- ⌘B or Ctrl+B collapses it.
- The current page has aria-current=page.