Collapsible Items Sidebar Block for React

A section is both a place and a list. If the whole row only toggled, you could never open the section's own page; if the whole row only navigated, you could never fold the list without leaving where you are. So the label is a SidebarMenuButton link and the chevron is a SidebarMenuAction that is the Collapsible's trigger. Each has its own name: "Components, 4 pages" for the link and "Components pages" for the button, which also reports aria-expanded and aria-controls for the sub-menu it owns. Choosing a label opens its section if it was closed, since you will want to see the pages.

It is the length of the section's pages array, never typed twice. It sits between the label and the chevron as a SidebarMenuBadge, hidden from assistive technology because the link's own name already says "4 pages". The label has padding at its end so a long name is cut with an ellipsis before it reaches the count.

The menu button or the rail along the edge folds it to the four section icons with tooltips. The sub-menus, counts and chevrons are hidden there, and each icon is still the section's overview link, so a folded rail can still reach every overview. Unfold it and the sections you left open are as you left them. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.

Everything. The fourteen pages and four overviews are typed in SECTIONS at the top of the file, and choosing one swaps the page's text in the block's own state; nothing is fetched. The links go to # whose handler shows the page instead of navigating. The section labels are SidebarMenuButtons with render set to an a, and the chevron is a CollapsibleTrigger with render set to a SidebarMenuAction. Point the links at your routes and mark the current one with isActive and aria-current.

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 chevrons work inside it, and choosing a label or a page closes the sheet and puts focus back on the button. The status line under the page says what opened.

The sidebar is a navigation landmark named after the product, its list named by the group label, and the open page, or the open overview, is marked as the current page. The chevron is a real button with a name and an expanded state, reachable by Tab right after its label. The page is a scrollable region named by its heading, the props are a table with column and row headings, and one polite status line reports every choice and every fold.