Shadcn Sidebar Docs Navigation

Documentation nav with sub-menus. Built by composing Collapsible, Sidebar. Uses cn alongside the shadcn primitives. A free, open source shadcn sidebar example you can install with npx shadcn@latest add @reui/c-sidebar-3 and edit as your own code.

A search field, sections that collapse and a sub-tree under the current page.

For AI Agents

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

Best for: An always open panel with no toggle where typing opens every section that still matches, with the current page trail open on load

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

Page hierarchies nested more than 2 levels deep: use the Tree component
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

Replace SECTIONS with your page tree; sections and sub-trees start open around the child marked isActive, so set it from the current route
With collapsible none the panel stays a 16rem column on phones and never becomes a Sheet; add your own mobile toggle
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/c-sidebar-3.md

MCPget_example("c-sidebar-3")

Installnpx shadcn@latest add @reui/c-sidebar-3

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Sidebar Docs Navigation

Dependencies

About Shadcn Sidebar Docs Navigation

What You Can Build With Shadcn Sidebar Docs Navigation

Composes Collapsible, Sidebar, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-sidebar-3
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Sidebar Examples

Workspace Switcher Application shell with a workspace switcher
Icon Rail Icon rail that collapses
Inspector Panel Right-hand inspector panel
Filter & Loading Filtering, loading and empty states

Related Shadcn Component Categories

Signature Pad
Open-source shadcn signature pad components for e-signature forms, agreements, and proof of delivery.
Skeleton
Open-source shadcn skeleton components for loading placeholders, perceived performance, and content previews.
Slider
Open-source shadcn slider components for range filters, pricing controls, and media settings.
Sonner
Open-source shadcn Sonner toast components for success feedback, error states, and non-blocking updates.
Sortable
Open-source shadcn sortable components for drag-and-drop lists, priority ranking, and reordering rows.
Spinner
Open-source shadcn spinner components for loading indicators, async actions, and button states.

Frequently Asked Questions

When should I use Shadcn Sidebar Docs Navigation?

Use it for an always open panel with no toggle where typing opens every section that still matches, with the current page trail open on load.

Shadcn Sidebar as a whole fits:

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

For page hierarchies nested more than 2 levels deep, use the Tree component. For a complete multi page product layout with header, nav and content area already built, use the App Shell blocks. For account settings pages that switch between personal details, billing and team panels, use the Profile blocks. For a shop catalog facet panel with price range, brand counts, color swatches and sizes, use the Filter Sidebar blocks.

How do I install Shadcn Sidebar Docs Navigation?

Run npx shadcn@latest add @reui/c-sidebar-3. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Sidebar Docs Navigation free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Sidebar Docs Navigation use?

It composes Collapsible, Sidebar. The shadcn CLI installs those alongside the example.

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.