ds
Components
Sidebar nav

Sidebar nav

The app sidebar: sections, counts, collapse to icons.

Pipelines

Show code

<nav class="sidenav" aria-label="Workspace">
  <div class="sn-top"><button class="sn-ws">…</button></div>
  <div class="sn-body">
    <div class="sn-sec">
      <span class="label">Monitor</span>
      <ul>
        <li><a class="sn-item" href="/alerts" data-tip="Alerts" data-tip-pos="right"><svg class="i">…</svg><span>Alerts</span><span class="badge down">3</span></a></li>
        <li><details class="sn-group" open>
          <summary class="sn-item"><svg class="i">…</svg><span>Usage</span></summary>
          <ul class="sn-sub"><li><a class="sn-item" href="/usage/compute"><span>Compute</span></a></li> …</ul>
        </details></li>
      </ul>
    </div>
  </div>
  <div class="sn-foot"><span class="who">…</span><button class="btn icon sm ghost" aria-label="Collapse sidebar">…</button></div>
</nav>

The sidebar for an app with more than five places to go. The workspace switcher sits at the top because everything below belongs to it; the signed-in person sits at the bottom. Sections are labelled in mono like the rest of ds, the current page is washed in the accent, and counts are faint mono on the right. A red badge is for things that need someone, like firing alerts, never for totals.

The button at the bottom collapses the sidebar to icons. Labels hide, section labels become hairlines, and each item gets a tooltip on the right. Try it.

API

Class	On	What it does
`.sidenav`	nav	The column, 15rem, full height. `--sn-w` sets the width.
`.mini`	.sidenav	Icons only, 3.5rem. Items show their `data-tip` on hover.
`.sn-top / .sn-body / .sn-foot`	div	Fixed top, scrolling middle, fixed bottom.
`.sn-ws`	button	Workspace switcher: a square avatar, name, plan, chevrons.
`.sn-sec`	div	A section: an optional .label, then a list.
`.sn-item`	a, summary	Icon, <span> label, then a <small> count or a .badge.
`aria-current="page"`	.sn-item	The current page.
`.sn-group / .sn-sub`	details / ul	A folding group and its indented children.

Five to twelve items, in sections of related places.
Keep the collapsed state per person.
Short labels: one or two words.

Don't

More than one level of nesting.
Counts on every item. Show the ones that change what people do.
Hiding settings in the user menu and the sidebar at once.

Accessibility

Use nav with a label, and aria-current="page" on the current link.
When collapsed, the labels are hidden with display: none, so give each link an aria-label as well as the tooltip.