shadcn.io is not affiliated with official shadcn/ui
Documentation Tree Sidebar Block for React
A docs host in a fixed-height window whose sidebar is a numbered outline that opens the folds above the page you choose, an Auto-collapse switch that closes the rest, a breadcrumb over the page and Previous and Next buttons in the top bar.
Installation
Overview
Keep the reader's place in a long outline with this documentation tree sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar as a numbered outline: six sections, 1 Getting started to 6 Reference, with pages numbered under them (2.1) and two folds of sub-pages (2.3.2), every number in figures of one width. Choosing a page opens the folds above it, the active path. The Switch over the outline, Auto-collapse others, makes that tidy: with it on, choosing a page also closes every other fold, and turning it on tidies the outline at once. The top bar walks the flat order of the pages with Previous and Next Buttons, the rail scrolls to the page they land on, and a breadcrumb over the page names the path to it, each step a link to that fold's first page. Folded to icons the rail is a column of section numbers with tooltips; below the medium breakpoint it is a sheet. It's built from Sidebar, Collapsible, Switch, Button and Guides, with a CSS entrance only. For documentation, manuals and any outline that readers move through in order.
FAQ
What is the active path, and how is it kept?
It is the list of folds above the open page: its section and, for a page in a fold like 2.3 Markdown, that fold too. Every fold is controlled by one list of open ids, and choosing a page, from the rail, from Previous and Next, or from the breadcrumb, runs one step that sets the page and opens its path. With the switch on, the new list is just the path; with it off, the path is added to what was already open, so folds you opened yourself stay open.
What does Auto-collapse others do?
Only choosing a page closes other folds, and only while the switch is on; opening or closing a fold by hand always does what you asked. Turning the switch on at once closes every fold that is not above the open page, and the status line says so. Turning it off closes nothing. Both states are announced in the polite line under the page, which also names what was closed.
How do Previous and Next walk the outline?
They step through FLAT, the pages in reading order: a section's own pages, then its folds' pages, so 2.2 is followed by 2.3.1. Folds are not pages, so they are skipped. At either end the button is dimmed with aria-disabled and stays in place, and pressing it says "first page" or "last page" instead of vanishing. After a step the rail scrolls the page's link to the middle, once the folds have opened.
What happens when the sidebar folds to icons?
The menu button or the rail along the edge folds it to the six section numbers with tooltips; the pages, folds and switch are hidden. Pressing a number unfolds the rail and opens that section. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The eighteen pages are typed in SECTIONS at the top of the file, numbers included, and choosing one swaps the page's text in the block's own state; nothing is fetched. The page links are SidebarMenuSubButtons with an href to # whose handler shows the page instead of navigating. The section rows are SidebarMenuButtons that flip their own fold: each carries its own aria-expanded and a press handler, onClick, over a controlled Collapsible, because a row's tooltip and a Collapsible trigger would both claim the button's id. The fold rows are real CollapsibleTriggers. Point the links at your routes and mark the current one with isActive and aria-current.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The switch and the outline are inside it, and choosing a page closes the sheet and puts focus back on the button. Previous and Next stay in the top bar, and the breadcrumb and status line say where you are.
Related
- Pro
Nested Collapsible Sidebar
Folds and treesA help centre in a fixed-height window whose wide sidebar folds three levels deep, categories that hold topics that hold articles, with a Reveal active button that opens only the folds above the open article.
- Pro
Collapsible Groups Sidebar
Folds and treesA framework's docs in a fixed-height window whose slim sidebar has five groups that fold from their labels, with Expand all and Collapse all, a count of open groups and a dot on a folded group that holds the current page.
- Pro
Collapsible Items Sidebar
Folds and treesA design system's docs in a fixed-height window whose sidebar rows are split: a label that opens a section's overview and a separate chevron that opens its sub-menu, with a count of pages on each row.
- Pro
File Tree Sidebar
Folds and treesA code editor in a fixed-height window whose slim sidebar is a file tree with file-type icons, arrow-key, Home, End, asterisk and type-ahead navigation, a Collapse all button, and the chosen file's lines and path on the page.
- Pro
Tab Groups Sidebar
Headers and sectionsA markdown editor in a fixed-height window whose sidebar has a tab strip over its list, switching between Files, the open file's Outline and Bookmarks, each keeping its own selection and marking the chosen line in the document.
- Pro
Multi-Level Menu Sidebar
Folds and treesA grocery app in a fixed-height window whose inset sidebar drills down one level at a time, panel by panel up to four levels deep, with a back button, Escape and a breadcrumb that all go up.