52Docs sidebar

Grouped links under mono kickers; the active page gets the left accent line — the row equivalent of the card's top accent. Sticky beside content ≥ lg, a drawer below.

Use it for

Documentation hubs, settings sections

Not for

3–4 links — Tabs

Default

markup

<nav class="ns-sidebar" aria-label="Documentation" style="position:static; max-inline-size:14rem">
  <div class="ns-sidebar__group">
    <span class="ns-sidebar__label">Getting started</span>
    <a class="ns-sidebar__link" href="#">Your first org</a>
    <a class="ns-sidebar__link" href="#" aria-current="page">Objects &amp; fields</a>
    <a class="ns-sidebar__link" href="#">Relationships</a>
  </div>
  <div class="ns-sidebar__group">
    <span class="ns-sidebar__label">Apex</span>
    <a class="ns-sidebar__link" href="#">Triggers</a>
    <a class="ns-sidebar__link" href="#">Testing</a>
  </div>
</nav>

Accessibility contract

aria-current="page" is both the style hook and the announcement