Shadcn Sidebar

What is Shadcn Sidebar?

A sidebar is the persistent navigation column an app is built around: a product or workspace switcher at the top, grouped links in the middle, an account menu at the bottom, and page content beside it. Shadcn Sidebar supplies all 4 regions as named parts, so the shell is composition instead of flex boilerplate rewritten per project. SidebarProvider wraps the screen, Sidebar holds the nav, and SidebarInset is the main element your routes render into.

The components here show the full anatomy on a single screen, a version that narrows to an icon rail with tooltips, a documentation sidebar with collapsible groups and sub-menus, a right-hand inspector panel, and a searchable project list with loading skeletons. Between them they answer the questions that actually decide a shell: how many nav levels you need, where counts and row actions go, and what the surface does while data is still in flight.

Why Use Shadcn Sidebar?

Hand-rolled sidebars fail in the same places every time: the collapsed width, the mobile fallback, the active trail through nested links, and focus order once rows grow their own action menus. Sidebar has a decision for each one. Menu rows take isActive, actions and count badges sit as siblings of the row button so both stay clickable, and the tooltip prop on a menu button only shows once the sidebar is collapsed, which is the only moment the label is missing.

The free components stop at a single screen, because a shell is only worth judging next to real content. That is where ReUI Pro continues: all 21 App Shell blocks are this primitive assembled into finished layouts, with 139 files across them importing Sidebar directly. They cover the branches a single preview cannot show at once, including the icon rail, the floating and inset variants, nav that runs 2 levels deep, command-K search, and the mobile sheet.

Shadcn Sidebar Features

• Provider-Owned State. SidebarProvider holds a single open boolean and exposes it through useSidebar as state, open, setOpen, isMobile, and toggleSidebar. Pass defaultOpen for uncontrolled use, or open and onOpenChange when the state belongs to your own store.
• 3 Collapse Modes. collapsible takes offcanvas, icon, or none. Expanded is 16rem and the icon rail is 3rem, both set as CSS variables on the wrapper, so a different width is one --sidebar-width override away.
• Mobile Sheet Below 768px. Unless collapsible is none, the same markup re-renders inside a Shadcn Sheet at 18rem under 768px, with its own open state that SidebarTrigger toggles. You author the nav once and the phone layout follows.
• Menu Rows With Actions and Badges. SidebarMenuButton carries isActive, an outline variant, and 3 sizes. SidebarMenuAction adds a trailing control that can stay hidden until hover, and SidebarMenuBadge holds a count that hides itself once the sidebar collapses to icons.
• Nested Sub-Menus. SidebarMenuSub renders a second level of links, anchors by default and in 2 sizes, indented under the parent row. Pair it with Shadcn Collapsible for sections that open and close with the active trail.
• Collapsed Tooltips and Loading Rows. The tooltip prop renders a Shadcn Tooltip that stays hidden until the sidebar is collapsed on a desktop width. SidebarMenuSkeleton builds on Shadcn Skeleton to give the menu a loading row, with an optional icon block, so nav that waits on data does not jump.
• Shadcn Create Compatible. Sidebar spacing, radius, and control heights come from the active style, so all 8 Shadcn Create styles (Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea) and the Radius, Font Family, and Color Scale controls apply to previews and exported code alike.

Wiring Sidebar Into a Next.js Layout

Put SidebarProvider in the layout that owns the shell rather than in a page, so the open state survives navigation. Render Sidebar and SidebarInset as siblings: the inset is a main element that takes the remaining width, and a Shadcn Breadcrumb next to SidebarTrigger in its header row gives every route a way back out.

For the first paint, read the sidebar_state cookie the provider writes and pass it to defaultOpen from your server layout. The provider writes that cookie but never reads it back, so without this step a collapsed sidebar snaps open after hydration. Mark the current route with isActive, and use the composition prop (render under Base UI, asChild under Radix UI) to make each row a real link so prefetching and middle-click keep working.