shadcn.io is not affiliated with official shadcn/ui
Separator Sections Sidebar Block for Radix UI
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 Radix 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 asChild around 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.