Shadcn Sidebar

Q: How do I make the sidebar collapse to icons?

Set `collapsible` to icon on `Sidebar`. At that width the shell drops to the 3rem `--sidebar-width-icon` value, sub-menus and count badges hide themselves, and a `tooltip` on each menu button carries the label the icon no longer shows. Add `SidebarRail` if you want the thin strip along the edge to toggle it as well.

Q: How do I keep the sidebar open or closed between visits?

The provider writes a `sidebar_state` cookie with a 7 day life on every toggle, but it does not read that cookie back for you. Read it in your server layout and pass the value to `defaultOpen` so the server renders the state the visitor left. Use `open` and `onOpenChange` instead when the state lives in your own store.

Q: How do I show which page is active?

Pass `isActive` to `SidebarMenuButton` or `SidebarMenuSubButton` and compare against the current route yourself, usually with `usePathname`. Keep it on the button rather than the list item so the active style, the hover state, and the focus ring all land on a single element.

Q: Can I put a search field or a deep tree in the sidebar?

Yes. `SidebarHeader` accepts any content, so a Shadcn Input Group sits above the nav and filters the list below it. `SidebarMenuSub` covers 2 levels of links, and Shadcn Tree handles deeper hierarchies inside `SidebarContent` when 2 levels are not enough.

Browse 5 production-ready shadcn sidebar components for dashboard navigation, documentation trees, project switchers, and right-hand inspector panels. Sidebar is compatible with Radix UI and Base UI composition and is fully aligned with Shadcn Create style options so radius, colors, and typography match your design tokens.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

The persistent navigation column of an app, which can narrow to an icon rail or slide off screen
Documentation trees with collapsible sections and sub-pages, or project lists narrowed by a search field
A right side inspector that shows the details of the record open beside it

When not to use

A complete multi page product layout with header, nav and content area already built: use the App Shell blocks
Account settings pages that switch between personal details, billing and team panels: use the Profile blocks
A shop catalog facet panel with price range, brand counts, color swatches and sizes: use the Filter Sidebar blocks

Agent notes

Menu links are anchors passed through render on the base twin and asChild on radix; point each # href at your route
SidebarProvider listens for Cmd or Ctrl+B on the whole window, so pressing it in a text editor on the page toggles its open state too

Markdownhttps://web.dev.reui.io/components/sidebar.md

MCPget_component("sidebar")

Installnpx shadcn@latest add sidebar

Full index for agents:llms.txtReUI MCP setup

Shadcn Sidebar: App Shell Navigation, Icon Rails, and Sub-Menus

Shadcn Sidebar is not one component but 23 parts and a useSidebar hook: a provider that owns the open state, the sidebar shell itself, header, content and footer regions, groups, menus, sub-menus, count badges, row actions, an edge rail, and an inset region for the page beside it. It follows Radix UI composition, works the same way under Base UI, and takes every spacing and radius value from the active Shadcn Create style.

The provider holds a single open boolean, and that boolean decides the layout. The sidebar sits at 16rem, narrows to a 3rem icon rail, slides off canvas, or below 768px reopens as a Shadcn Sheet at 18rem. The provider also writes a sidebar_state cookie on every toggle and registers cmd/ctrl+B on the window, so the state is recoverable on the server and reachable from the keyboard.

ReUI shows sidebars inside working screens rather than on their own, so you can judge nav density, active states, and how the column pairs with a Shadcn Breadcrumb header, a Shadcn Avatar identity row, and a Shadcn Dropdown Menu account menu. The sections below cover what the component is, why teams use it, which parts matter, and how to wire it into a Next.js layout.

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.

A sidebar is mostly other components arranged well. The header usually holds a Shadcn Avatar and a Shadcn Dropdown Menu for the workspace switcher, menu rows carry a Shadcn Badge for counts and a second dropdown for row actions, and the footer repeats the account menu. SidebarSeparator wraps Shadcn Separator so dividers keep the sidebar's own spacing.

In the inset, a Shadcn Breadcrumb beside SidebarTrigger is the standard header row. Once the nav grows past a scannable list, a Shadcn Command palette with Shadcn Kbd shortcut hints is the usual companion, and a Shadcn Card in the footer is where plan and usage surfaces normally go.

When the nav is settled but the screen behind it is not, the 21 App Shell blocks are the next step: complete shells built on this primitive, covering icon rail, floating, inset, dual sidebar, and topbar layouts, plus command-K search and the mobile sheet. The same Sidebar frames 4 of the 12 AI Chat blocks as well, so a conversation surface and an admin surface can share a single shell.

App Shell Blocks in ReUI Pro

The free examples above pair with 35 production ready app shell blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

App Shell (35 blocks)App shell layouts with sidebar, rail, or top bar navigation for dashboards, settings panels, and multi-page apps.

Browse all Application blocks

Frequently Asked Questions

What is the difference between Shadcn Sidebar and Shadcn Sheet?

Sidebar is a layout: it reserves width in the page and content sits beside it. Shadcn Sheet is an overlay that covers the page and traps focus. You rarely have to choose, because Sidebar already falls back to a Sheet below 768px unless collapsible is set to none.

How do I make the sidebar collapse to icons?

Set collapsible to icon on Sidebar. At that width the shell drops to the 3rem --sidebar-width-icon value, sub-menus and count badges hide themselves, and a tooltip on each menu button carries the label the icon no longer shows. Add SidebarRail if you want the thin strip along the edge to toggle it as well.

How do I keep the sidebar open or closed between visits?

The provider writes a sidebar_state cookie with a 7 day life on every toggle, but it does not read that cookie back for you. Read it in your server layout and pass the value to defaultOpen so the server renders the state the visitor left. Use open and onOpenChange instead when the state lives in your own store.

What happens to the sidebar on mobile?

Under 768px the sidebar renders inside a Shadcn Sheet at 18rem with its own open state, and SidebarTrigger toggles that instead of the desktop one. collapsible set to none is the exception: it is a plain column at every width. The components on this page are split between the two so you can see both. 3 of them run collapsible none and stay a fixed panel; 2 run the icon rail and the off-canvas branches, and their SidebarInset header keeps a trigger so the sheet is reachable when the layout is narrow enough to use it.

How do I show which page is active?

Pass isActive to SidebarMenuButton or SidebarMenuSubButton and compare against the current route yourself, usually with usePathname. Keep it on the button rather than the list item so the active style, the hover state, and the focus ring all land on a single element.

Can I put a search field or a deep tree in the sidebar?

Yes. SidebarHeader accepts any content, so a Shadcn Input Group sits above the nav and filters the list below it. SidebarMenuSub covers 2 levels of links, and Shadcn Tree handles deeper hierarchies inside SidebarContent when 2 levels are not enough.

How are ReUI sidebar components different from a minimal docs demo?

A docs demo shows the parts. These 5 components show decisions: a workspace switcher and account menu in place, an icon rail with accessible names kept, a documentation tree, a right-hand inspector, and a nav with search, loading, and empty states. When you need the finished screen behind the nav, the 21 App Shell blocks continue from the same primitive.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.