shadcn.io is not affiliated with official shadcn/ui
Separator Sections Sidebar Block for React
A 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.
Installation
Overview
Choose how a menu's sections are told apart with this separator sections sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar with ten links in three sections: Quick access, Workspace and Resources. A Segment Group in the rail switches the sections between Labels, which writes each section's name above its links, Dividers, which draws a SidebarSeparator hairline between sections, and Spaced, which leaves the slot empty. The ten rows and the open page never change, only what sits between the sections, and in the last two styles each section keeps its name for screen readers. Folded to icons, the hairlines stay and the labels go; on a phone the sidebar is a sheet with the control inside it. The page lists three things for the chosen link and counts the rows and sections. It's built from Sidebar, Segment Group, Avatar and Guides, with a CSS entrance only. For hubs, workspaces and any menu long enough to need sections.
FAQ
What changes between the three styles?
Only what sits in the slot that opens each section. Every section starts with the same 2rem slot: Labels writes the section's name in it, Dividers draws a SidebarSeparator hairline across it (none above the first section), and Spaced leaves it empty. Because the slot is the same height in all three, no row moves when you change the style. The links, their order and the active one are the same too.
Do the sections still have names when the labels are hidden?
Yes. Each section's menu is named by its label through aria-labelledby, and the label stays in the page, hidden from sight, when it is not drawn: aria-labelledby reads a hidden label as it does a visible one. A screen reader hears "Workspace" before the four links in Dividers and Spaced just as it does in Labels.
What does the folded rail show?
The icons and tooltips of the ten links. The section labels are hidden there as they always are, so in Dividers the hairlines are what separate the groups of icons, and in the other two styles the gap does. Unfolding returns the control and the style you chose.
What stays in the page, and how do I connect it?
Everything. The ten links and their lists are typed in SECTIONS, and the style is only block 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. Keep the style you like and delete the control. The links go to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with render set to an a element.
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 segment group is inside it, so the sections change as you choose. Picking a link closes the sheet and returns focus to the button, and the status line under the page says which link opened.
Related
- 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.
- 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
Scrollable Content Sidebar
Headers and sectionsAn all-in-one workspace in a fixed-height window whose wide sidebar scrolls six groups of pages under sticky group labels, with a line that says which group is at the top and a Jump to select that scrolls to one.
- 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
Dark Theme Sidebar
State and themingA developer console in a fixed-height window with three sidebar surfaces made only of theme tokens (flush, tinted and raised), so the rail is right in every preset and in dark mode, beside a terminal that stays dark by nature.
- 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.