Components · Navigation

Sidebar

The portal's primary rail: collapsible accordion sections over leaf links. The current route lights with the accent-soft fill, an accent label and a left accent rail; unread counts ride a rounded accent pill; a section that owns the active route turns its header accent. Everything draws from theme tokens, so the rail re-skins in light and dark.

Live rail · Downtown Rescue

What's shown

Active item — accent rail

Accent-soft fill + accent label + a 3px left rail, and aria-current="page". Exactly one leaf active per view.

Count badge

A rounded accent pill on the row's right edge for unread items — labelled 4 new for AT, never colour alone.

Accordion section

A header button with aria-expanded; its caret rotates 90° when open. The header turns accent when it owns the active route (Organize, here).

Nested child group

Team children indent one level (depth 2) with a hairline guide line — the roving-focus target (Harbor Foster Network) is pinned to its focus ring.

Collapsed group

Learn is closed — caret points right, its panel isn't rendered. Hover any leaf for the --surface-2 fill (Roster is pinned to hover).

Source · PortalSidebar.tsx — rowClass() active/hover, NavSection (aria-expanded + rotating caret), NavLeaf badge count & depth indent; recommended-action pill from the same rail. Section-label treatment mirrors SectionHeader.tsx. The accent rail is this design system's active-emphasis on top of the app's accent-soft fill.