shadcn.io is not affiliated with official shadcn/ui
Collapsible Groups Sidebar Block for React
A 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.
Installation
Overview
Fold a long docs menu by group with this collapsible groups sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar of five groups: Getting started, Core concepts, Styling, Optimization and Deploying. Each group's label is the toggle of a Collapsible, and which groups are open is one record in the block's state. Two ghost Buttons, Expand all and Collapse all, set every group at once, a line under them counts how many are open, and a group that is folded while it holds the page you are reading carries a dot, so the menu never loses your place. The page is the chosen docs page in typed text with a sample and a link to the next page. Folded to icons, the rail shows every page's icon with a tooltip whatever the groups say; below the medium breakpoint it is a sheet. It's built from Sidebar, Collapsible, Button, Badge and Guides, with a CSS entrance only. For documentation, handbooks, settings and any menu long enough to need folding.
FAQ
How do the groups open and close?
Each group is a Collapsible around a SidebarGroup, and its trigger is the group's label, styled as the sidebar's own label but a real button with aria-expanded. Opening one doesn't close another, so any mix can be open. All five states live in one record, Openness, which the two buttons rewrite in one step; the count under them and the polite status line are derived from that record, never typed.
What does the dot on a group mean?
The group is folded but the page you are on is inside it. The dot is a plain filled circle, not a colour, and the trigger's name says "holds the current page" so a screen reader gets the same news. Follow the "Next" link on a page to cross into a folded group and the dot shows up on its label.
What do Expand all and Collapse all do when there is nothing to do?
They stay in place, quietly dimmed with aria-disabled, and pressing one says so in the status line ("Nothing to expand: all groups are open."). They are never hidden or removed, so the buttons never jump and keyboard focus is never lost.
What happens when the sidebar folds to icons?
The menu button or the rail along the edge folds it to a strip of page icons with tooltips. The group labels are hidden there, so every group is held open while the rail is folded: the strip shows all twelve pages whatever your groups say, and your open and closed groups come back when you unfold. The block sets persist={false} and shortcut={false}, so it 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 twelve docs pages are typed in GROUPS at the top of the file, and choosing one swaps the page's text in the block's own state; nothing is fetched or saved. The pages are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with render set to an a element. Point them 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. Choosing a page closes it and puts focus back on the button; the status line under the page says which page opened and how many groups are open.
Related
- 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
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
Floating Variant Sidebar
VariantsA CSS toolkit's docs in a fixed-height window with a floating sidebar: a rounded card inset from the window over a tinted shell, five collapsing sections of pages, and a switch to the flush rail for comparison.
- Pro
Sub-Menus Sidebar
Folds and treesA recipe manager in a fixed-height window whose floating sidebar has sections with sub-menus, a switch between One at a time and Keep open, and arrow keys that open a sub-menu toward the end of the line and close it toward the start.
- Pro
Documentation Tree Sidebar
Folds and treesA 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.
- Pro
Simple Groups Sidebar
Headers and sectionsA company handbook in a fixed-height window whose muted sidebar has four groups of pages and a density toggle: Roomy, Default and Compact set the size of the rows and the gaps, and the rail prints the measured row height.