shadcn.io is not affiliated with official shadcn/ui
Simple Groups Sidebar Block for React
A 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.
Installation
Overview
Let people tune a long menu to their screen with this simple groups sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar in the theme's muted tone, with four labelled groups of handbook pages: Welcome, Policies, Benefits and Tools. One control sits in the rail, a Toggle Group named Density. Roomy, Default and Compact set the size of every menu button (lg, default, sm) and the gaps between rows and between groups, so the same fourteen links read three ways, and a quiet readout beside the toggle prints the height of the first row, measured in the page so the number is true in every style. Folded to icons, the rail shows each page's icon with a Tooltip; on a phone it is a sheet with the toggle inside it. The page shows the chosen handbook page: a sentence, three key points, its owner and its last review. It's built from Sidebar, Toggle Group, Badge, Avatar and Guides, with a CSS entrance only. For handbooks, docs, settings and any menu whose readers want it tighter or looser.
FAQ
How does the toggle change the rows?
Each density is one entry in MODES: the catalog size for the menu buttons, a gap class for each group's menu and a padding class for each group. The toggle sets one value in state and every row and group reads it, so nothing is measured to make the change. The sizes are the Sidebar's own, which is why the three densities follow whatever style the project uses.
Where does the row height number come from?
A small RowReadout finds the first row in its own copy of the rail after each change and prints its rendered height. A style with taller rows prints its own number, and on a phone the readout sits in the sheet and measures the sheet's copy. The rows turn their height transition off, so the measurement is taken after the change and not part-way through it.
Do the groups fold?
No, and that is on purpose: this block is about how a long menu is spaced, not folded. Each group's label names its menu with aria-labelledby, so a screen reader hears "Policies" before the four pages. For groups that open and close, see the collapsible groups sidebar.
What happens when the sidebar folds to icons?
The labels and the density toggle go, since the toggle has no icon form, and every page shows its icon with a tooltip at the icon rail's own size whatever the density says. Unfolding brings the toggle back with the density you chose.
What stays in the page, and how do I connect it?
Everything. The fourteen pages are typed in GROUPS with their text, owner and review date, and the density is held only in the block's state: 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. To remember a density, keep it where your app keeps preferences and pass it in as the starting value. 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. The density toggle is inside it, so you see the rows change as you press. Choosing a page closes the sheet and puts focus back on the button, and the status line under the page says which page opened or which density is on.
Related
- 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
Separator Sections Sidebar
Headers and sectionsA team hub in a fixed-height window whose sidebar tells its three sections apart three ways, with labels, with hairlines or with space alone, chosen from a segment group while the ten rows and the open page stay put.
- Pro
Sticky Header Sidebar
Headers and sectionsA store admin in a fixed-height window whose sidebar keeps its header and footer in place over eighteen scrolling pages, with a hairline that appears only while there is something to scroll, a filter, and a Back to top button.
- Pro
Custom Width Sidebar
VariantsA hosting platform's settings console in a fixed-height window where the sidebar's width is the control: four presets set its CSS variable, and a measured count shows how many of ten long labels get cut at each.
- Pro
Compact Icon Rail Sidebar
Icon railsA note-taking app in a fixed-height window whose narrow rail keeps a caption under every icon, with a pill on the open destination, a dot on Inbox while it holds unopened notes and Alerts and Settings pinned at the foot.
- Pro
Brand Header Sidebar
Headers and sectionsA design-operations suite in a fixed-height window whose sidebar header is a brand lockup that opens a menu to go home, copy the logo name, copy the mark as SVG or open the brand guidelines.