Sidebar · kit

Example

Show the markup

<div class="demo-frame demo-frame-side">
  <nav class="kit-sidebar" aria-label="Example">
    <ul>
      <li><a href="#sidebar-demo"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M2.5 7.5 8 3l5.5 4.5V13a.5.5 0 0 1-.5.5H9.5v-3h-3v3H3a.5.5 0 0 1-.5-.5V7.5Z"/></svg>Dashboard</a></li>
      <li>
        <a href="#sidebar-demo" aria-current="page"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M2.5 4.5a1 1 0 0 1 1-1h3l1.5 1.5h4.5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-7.5Z"/></svg>Projects<span class="kit-sidebar-meta">3</span></a>
        <ul><li><a href="#sidebar-demo">Item one</a></li><li><a href="#sidebar-demo">Item two</a></li><li><a href="#sidebar-demo">Item three</a></li></ul>
      </li>
      <li><a href="#sidebar-demo"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M3 13V8m3.5 5V3.5M10 13V6.5m3.5 6.5V9.5"/></svg>Reports<span class="kit-sidebar-meta" data-tone="new">New</span></a></li>
    </ul>
    <p class="kit-sidebar-label">Workspace</p>
    <ul>
      <li><a href="#sidebar-demo"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="6" cy="5.5" r="2.2"/><path d="M2 13a4 4 0 0 1 8 0M10.5 3.5a2.2 2.2 0 0 1 0 4.2M12 13a4 4 0 0 0-2-3.4"/></svg>Team<span class="kit-sidebar-meta">12</span></a></li>
      <li><a href="#sidebar-demo"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="8" cy="8" r="2"/><path d="M8 1.8v1.7M8 12.5v1.7M14.2 8h-1.7M3.5 8H1.8M12.4 3.6l-1.2 1.2M4.8 11.2l-1.2 1.2M12.4 12.4l-1.2-1.2M4.8 4.8 3.6 3.6"/></svg>Settings</a></li>
    </ul>
  </nav>
</div>

Usage

A <nav class="kit-sidebar"> holding plain lists of links. Mark the page you're on with aria-current="page".

Part	Markup
Link	`<a href="…">` inside an `<li>`
Icon	an `<svg>` as the link's first child (decorative: `aria-hidden="true"`)
Count or badge	`<span class="kit-sidebar-meta">` at the end of the link; `data-tone="new"` for a highlighted badge
Section label	`<p class="kit-sidebar-label">` before a list, or a heading if your page outline needs one
Nested pages	a `<ul>` inside the `<li>`, after the link

Where the sidebar sits is up to the page: sticky beside the content on wide screens, in a drawer or a wrapping row on phones. This site keeps it sticky on desktop and wraps it into a row below 960px.

Accessibility

<nav> is a navigation landmark, so screen-reader users can jump to it. Give it an aria-label ("Main", "Site") when the page has more than one <nav>.
aria-current="page" tells screen readers which link is the current page; it's also shown by more than colour (bold, and outlined in forced-colours mode).
Counts are part of the link's name ("Projects 4"). Keep them short, and put any longer explanation in the page itself.
Icons are decorative; the text is always visible, so the sidebar never relies on icons alone.

Extension points

Custom properties: --kit-control (row height), --kit-accent and --kit-accent-soft (the current page), --kit-radius-1.