## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/sidebar ``` ```bash pnpm dlx shadcn@latest add @dotui/sidebar ``` ```bash yarn dlx shadcn@latest add @dotui/sidebar ``` ```bash bun x shadcn@latest add @dotui/sidebar ``` ## Anatomy [#anatomy] A sidebar is built from a `SidebarProvider` wrapping the `Sidebar` and a `SidebarInset` (the main content). Inside the sidebar, compose a header, scrollable content split into groups of menus, and a footer. ```tsx import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, } from '@/components/ui/sidebar' ``` ```tsx Platform Dashboard {/* page content */} ``` ## Usage [#usage] The `Sidebar` positions itself relative to the `SidebarProvider`, so the whole shell is self-contained. For a full-screen app, give the provider the viewport height and let the content scroll inside the inset: ```tsx {/* ... */} {/* ... */} ``` Below the `md` breakpoint the sidebar renders as an off-canvas drawer, toggled by the same `SidebarTrigger`. The sidebar can also be toggled from anywhere with ⌘+B (Ctrl+B). ### Links [#links] Pass `href` to `SidebarMenuButton` (or `SidebarMenuSubButton`) to render it as a link, and `isActive` to mark the current page (which also sets `aria-current="page"`). ```tsx Dashboard ``` ### useSidebar [#usesidebar] Read or control the sidebar state from any descendant of `SidebarProvider`: ```tsx const { state, isOpen, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, } = useSidebar() ``` ### Controlled state [#controlled-state] Drive the open state yourself with `isOpen` and `onOpenChange` on `SidebarProvider` — useful for persisting it (e.g. in a cookie or `localStorage`). ## Examples [#examples] ## API Reference [#api-reference] ### SidebarProvider [#sidebarprovider] ### Sidebar [#sidebar] ### SidebarInset [#sidebarinset] ### SidebarTrigger [#sidebartrigger] ### SidebarRail [#sidebarrail] ### SidebarHeader [#sidebarheader] ### SidebarFooter [#sidebarfooter] ### SidebarContent [#sidebarcontent] ### SidebarSeparator [#sidebarseparator] ### SidebarGroup [#sidebargroup] ### SidebarGroupLabel [#sidebargrouplabel] ### SidebarGroupAction [#sidebargroupaction] ### SidebarGroupContent [#sidebargroupcontent] ### SidebarMenu [#sidebarmenu] ### SidebarMenuItem [#sidebarmenuitem] ### SidebarMenuButton [#sidebarmenubutton] ### SidebarMenuAction [#sidebarmenuaction] ### SidebarMenuBadge [#sidebarmenubadge] ### SidebarMenuSkeleton [#sidebarmenuskeleton] ### SidebarMenuSub [#sidebarmenusub] ### SidebarMenuSubItem [#sidebarmenusubitem] ### SidebarMenuSubButton [#sidebarmenusubbutton]