# Sidebar

A sidebar provides persistent section navigation or contextual controls. It is
secondary to the page's primary task and must not become an unlabeled drawer of
unrelated actions.

## Information architecture

Group destinations by user mental model, not by internal service ownership.
Use short stable labels, a visible current item, and restrained nesting. When a
hierarchy exceeds two visible levels, consider a dedicated navigation page or
progressive disclosure.

Use a labelled `nav` for navigation sidebars. Apply
`aria-current="page"` to the active destination. Disclosure controls expose
their expanded state and remain separate from the destination link when both
behaviors are needed.

## Responsive behavior

On wide layouts the sidebar may be fixed or resizable. On narrow layouts it may
become a modal drawer, but the opener must be visible and named. A modal drawer
contains focus, closes with Escape, restores focus, and prevents obscured page
content from remaining interactive.

Persist collapsed width only when that preference is useful and reversible.
Icons alone require accessible names and a discoverable way to restore labels.

## State and feedback

Account for loading authorization-aware items, empty groups, unavailable
destinations, badges, and overflow. Never render a destination the current user
cannot access. Do not use badges as the sole source of critical status.

## Verification

Test deep links, current item, expanded groups, keyboard order, zoom, narrow
drawers, long translations, reduced motion, authorization changes, and focus
restoration after navigation or dismissal.