Sidebar Accordion

Updated 2 weeks ago

Live preview

default

When to use Sidebar Accordion

Use for a categorised left-rail navigation surface: sections labelled with small monospace caps, items as horizontally-padded links, one active link per view (2px left border in the brand accent, plus a soft accent-tint background).

This substrate's own documentation site (design.pointsav.com) dogfoods a close variant of this exact pattern in its live sidebar — see .nav-section / .nav-section-title / .sidebar li a.active in app-privategit-design/static/portal.css. That implementation additionally supports nested sub-groups (.nav-subgroup-label) for grouping items by origin within one section — a real-world extension beyond what this component's current recipe covers (see "Status" below).

When to use

  • Multi-section in-app navigation where the current location needs a persistent, always-visible left rail (documentation portals, admin consoles, settings screens).
  • Content organised into named categories where one item is active at a time and aria-current="page" communicates location.

When not to use

  • A small number of flat, unrelated links — use a plain link list instead of introducing section headings for one or two items.
  • Primary top-level navigation on a marketing or public-facing page — this pattern is for in-app orientation, not acquisition surfaces.

Status — recipe is a stub, not an accordion yet

Despite the component's name, the current recipe.json ("status": "stub", flowed back from project-bim's design-generic-components-index.md, 2026-04-29) contains a static categorised nav list — one section heading, one active-link example — with no expand/collapse toggle, no aria-expanded state, and no JS. There is exactly one variant ("default"). If accordion (collapsible-section) behavior is added in a future pass, it must follow the disclosure pattern already established elsewhere in this app (P1.7): a collapsed section is removed from the tab order via visibility:hidden, not merely max-height:0, and the toggle carries aria-expanded/aria-controls. Until then, treat this component as "named sections + active-link indicator," not as a true accordion.

Important Information

Design System disclosure

This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.