shadcn.io is not affiliated with official shadcn/ui
Collapsible examples · Sidebar
Nested Sidebar Items Collapsible for React
A two-level sidebar tree where Documentation opens to Components, which opens to two links.
A small navigation tree built from collapsibles inside collapsibles. Documentation opens to Components, which opens to two links, each level indented with a line at its start edge and a chevron that turns to point down. Use it for docs and file-like navigation.
Preview
Installation
FAQ
How are the two levels nested?
The inner Collapsible sits inside the outer CollapsibleContent. Each one opens and closes on its own, so Components keeps its state while Documentation is closed.
What draws the line beside Components?
The outer CollapsibleContent has ms-2 border-s-2 ps-2: a start border that follows the page direction, with Components indented past it.
Which icon does each row use?
The two triggers use ChevronRightIcon, size-4 for Documentation and size-3 for Components. The links use a filled CircleIcon at size-1.5 as a bullet. All are aria-hidden.
Do the chevrons turn when a level opens?
Yes, a quarter turn to point down. Each trigger has the group class and sets aria-expanded while open, so group-aria-expanded:rotate-90 on its chevron turns it.
When should this outline be a Tree View?
For a short static outline, nested collapsibles are enough: each trigger is its own button, and Tab moves between them. When people select items or expect arrow keys to move through the tree, use a Tree View.
Related
- Sidebar with Counts CollapsibleAn Inbox sidebar item with a count badge
- Settings Menu CollapsibleA Preferences menu with a settings icon
- Multi-Level Nested AccordionAn accordion of help center topics where
- Minimal Sidebar Group CollapsibleA sidebar group with a small uppercase
- Simple CollapsibleA ghost Toggle button with a chevron that
- Standard Accordion with ChevronA bordered accordion of three questions