A composable, keyboard accessible, and responsive sidebar component.
Right-Side Layout
Floating Variant
Installation
$ pnpm dlx shadcn-ui@latest add sidebar
Copy Structure
A typical Sidebar implementation requires a SidebarProvider to manage state across the page.
Copy import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar" import { AppSidebar } from "@/components/app-sidebar"
export default function Layout ({ children } : { children : React . ReactNode }) { return ( < SidebarProvider > < AppSidebar /> < main > < SidebarTrigger /> { children } </ main > </ SidebarProvider > ) } Usage
Here is the anatomy of a Sidebar component.
Copy import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, } from "@/components/ui/sidebar"
export function AppSidebar () { return ( < Sidebar > < SidebarHeader /> < SidebarContent > < SidebarGroup /> < SidebarGroup /> </ SidebarContent > < SidebarFooter /> </ Sidebar > ) } Variants
If you want the main content to look "inset" with a background, you can wrap your main view in SidebarInset.
Copy import { SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
export default function Layout ({ children } : { children : React . ReactNode }) { return ( < SidebarProvider > < AppSidebar /> < SidebarInset > < header > < SidebarTrigger /> </ header > < main > { children } </ main > </ SidebarInset > </ SidebarProvider > ) } API Reference
The Sidebar ecosystem exposes several properties to control its layout and behavior.
Prop Type Default Description defaultOpenbooleantrueThe default open state of the sidebar. openboolean- The controlled open state. onOpenChangefunction- Event handler called when the open state changes.
Prop Type Default Description side"left" | "right""left"The side of the screen the sidebar is rendered on. variant"sidebar" | "floating" | "inset""sidebar"The visual variant of the sidebar. collapsible"offcanvas" | "icon" | "none""offcanvas"The behavior when the sidebar is collapsed.
The useSidebar hook returns the current context of the Sidebar:
Prop Type Description state`"expanded" "collapsed"` openbooleanTrue if the sidebar is expanded. setOpen(open: boolean) => voidUpdates the open state. isMobilebooleanTrue if the viewport is below the mobile breakpoint. openMobilebooleanTrue if the mobile sidebar sheet is open. setOpenMobile(open: boolean) => voidUpdates the mobile sheet state. toggleSidebar() => voidToggles the sidebar between expanded and collapsed.
Prop Type Default Description asChildbooleanfalseRender as a different element using Radix Slot. isActivebooleanfalseSets the button to an active, highlighted state. variantenum"default"Visual variant (default, outline). sizeenum"default"Button size (default, sm, lg). tooltipstring | ReactNode- Tooltip content when the sidebar is collapsed.
Prop Type Default Description classNamestring- Additional CSS classes.
Prop Type Default Description showOnHoverbooleanfalseIf true, the action only appears when the parent SidebarMenuItem is hovered.
The Sidebar supports nested navigation using submenu components:
Component Description SidebarMenuSubThe container for a nested list of submenu items. SidebarMenuSubItemAn individual item within a submenu. SidebarMenuSubButtonThe button or link component for the submenu item.
Components
Use SidebarGroup to organize items into logical sections. It can contain a SidebarGroupLabel, SidebarGroupContent, and SidebarGroupAction.
A structured ul for displaying SidebarMenuItem lists. The SidebarMenuButton handles hover states, active states, and accessibility properties.
Accessibility
The sidebar implements standard WAI-ARIA practices out of the box:
Proper aria-expanded and aria-controls for the trigger.
Full keyboard navigation across menus.
Screen reader announcements when state changes.
Follows the strict 150ms structural animation rules defined in DESIGN.md.