Examples
Basic usage
<aside class="sidebar">
<nav class="sidebar-nav" aria-label="Primary">
<a href="#" class="sidebar-link" aria-current="page">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<rect x="3" y="3" width="7" height="7" />
<rect x="14" y="3" width="7" height="7" />
<rect x="3" y="14" width="7" height="7" />
<rect x="14" y="14" width="7" height="7" />
</svg>
<span class="sidebar-link-text">Dashboard</span>
</a>
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
/>
</svg>
<span class="sidebar-link-text">Projects</span>
</a>
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
<span class="sidebar-link-text">Team</span>
</a>
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="3" />
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
/>
</svg>
<span class="sidebar-link-text">Settings</span>
</a>
</nav>
</aside>
Links with trailing meta
<aside class="sidebar">
<nav class="sidebar-nav" aria-label="Primary">
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M22 12h-6l-2 3h-4l-2-3H2" />
<path
d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
/>
</svg>
<span class="sidebar-link-text">Inbox</span>
<span class="sidebar-link-meta badge is-neutral">12</span>
</a>
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
<span class="sidebar-link-text">Search</span>
<kbd class="sidebar-link-meta text-muted text--1">⌘K</kbd>
</a>
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
/>
</svg>
<span class="sidebar-link-text">Starred</span>
</a>
</nav>
</aside>
Groups
<aside class="sidebar">
<nav class="sidebar-nav" aria-label="Primary">
<div class="sidebar-group">
<span class="sidebar-group-label">Workspace</span>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link" aria-current="page">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<rect x="3" y="3" width="18" height="18" rx="2" />
</svg>
<span class="sidebar-link-text">Overview</span>
</a>
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
</svg>
<span class="sidebar-link-text">Members</span>
</a>
</div>
</div>
<div class="sidebar-group">
<span class="sidebar-group-label">Personal</span>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="8" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />
</svg>
<span class="sidebar-link-text">Profile</span>
</a>
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<rect x="3" y="11" width="18" height="11" rx="2" />
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
</svg>
<span class="sidebar-link-text">API keys</span>
</a>
</div>
</div>
</nav>
</aside>
Collapsible groups
<aside class="sidebar">
<nav class="sidebar-nav" aria-label="Primary">
<details class="sidebar-group" open>
<summary class="sidebar-group-label">Workspace</summary>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<rect x="3" y="3" width="18" height="18" rx="2" />
</svg>
<span class="sidebar-link-text">Overview</span>
</a>
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
</svg>
<span class="sidebar-link-text">Members</span>
</a>
</div>
</details>
<details class="sidebar-group">
<summary class="sidebar-group-label">Archive</summary>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="21 8 21 21 3 21 3 8" />
<rect x="1" y="3" width="22" height="5" />
<path d="M10 12h4" />
</svg>
<span class="sidebar-link-text">Completed projects</span>
</a>
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" />
</svg>
<span class="sidebar-link-text">Historical activity</span>
</a>
</div>
</details>
</nav>
</aside>
Nested groups
<aside class="sidebar">
<nav class="sidebar-nav" aria-label="Primary">
<details class="sidebar-group" open>
<summary class="sidebar-group-label">Workspace</summary>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<rect x="3" y="3" width="18" height="18" rx="2" />
</svg>
<span class="sidebar-link-text">Overview</span>
</a>
<details class="sidebar-group">
<summary class="sidebar-group-label">Archive</summary>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link">Foo</a>
<a href="#" class="sidebar-link">Bar</a>
<a href="#" class="sidebar-link">Baz</a>
<details class="sidebar-group">
<summary class="sidebar-group-label">
Completed projects
</summary>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link">Foo</a>
<a href="#" class="sidebar-link">Bar</a>
<a href="#" class="sidebar-link">Baz</a>
</div>
</details>
</div>
</details>
<div class="sidebar-group">
<span class="sidebar-group-label">Projects</span>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link" aria-current="page">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
/>
</svg>
<span class="sidebar-link-text">Active</span>
</a>
<a href="#" class="sidebar-link">
<svg
class="sidebar-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M20 6 9 17l-5-5" />
</svg>
<span class="sidebar-link-text">Completed</span>
</a>
</div>
</div>
</div>
</details>
</nav>
</aside>
Active branch trail
<aside class="sidebar">
<nav class="sidebar-nav" aria-label="Primary">
<details class="sidebar-group" open>
<summary class="sidebar-group-label">Workspace</summary>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link">Overview</a>
<details class="sidebar-group" open>
<summary class="sidebar-group-label">Projects</summary>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link">Active</a>
<details class="sidebar-group" open>
<summary class="sidebar-group-label">Q2 2026</summary>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link">Brief</a>
<a href="#" class="sidebar-link" aria-current="page"
>Roadmap</a
>
<a href="#" class="sidebar-link">Retros</a>
</div>
</details>
<a href="#" class="sidebar-link">Archived</a>
</div>
</details>
<a href="#" class="sidebar-link">Members</a>
</div>
</details>
</nav>
</aside>
Suppressing the rail
<aside class="sidebar">
<nav class="sidebar-nav" aria-label="Primary">
<details class="sidebar-group" open>
<summary class="sidebar-group-label">Workspace</summary>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link">Overview</a>
<a href="#" class="sidebar-link">Members</a>
<a href="#" class="sidebar-link">Settings</a>
</div>
</details>
<div class="sidebar-group no-border">
<span class="sidebar-group-label">Quick</span>
<div class="sidebar-group-content">
<a href="#" class="sidebar-link">Inbox</a>
<a href="#" class="sidebar-link">Search</a>
</div>
</div>
</nav>
</aside>
Source comments
Sidebar nav -- grouped vertical navigation for sidebars and drawers.
Link font size is declared on .sidebar as --sidebar-link-font-size so
it cascades to links in both the nav and the footer.
Active state: binds to [aria-current="page"] (PRINCIPLES.md P5), not
an .is-active class. The server or JS sets aria-current on the
matching link. The active link also paints a primary-colored segment
over the parent group's rail via a ::before pseudo.
Collapsible groups: wrap a group in <details class="sidebar-group">
with <summary class="sidebar-group-label">. Disclosed content (the
sidebar-links and any nested groups) goes inside a
<div class="sidebar-group-content"> sibling of the summary; static
<div class="sidebar-group"> uses the same wrapper. The expand/collapse
height animation comes from details.css (applied globally to
<details>). Use the open attribute for default-open state. No JS.
Opt out of the rail per-group with .no-border on .sidebar-group.
Collapsed mode: [data-collapsed] on the .sidebar panel (width rules
in sidebar.css) hides .sidebar-link-text, .sidebar-link-meta, and
.sidebar-group-label, and centers the icons that remain. The
slots stay in the markup; a hidden span no longer contributes to
the accessible name, so give icon-only rows an aria-label.
Reference
Source: src/css/sidebar-nav.css
Applies to
.sidebar-nav
Classes
| Class | Kind | Description |
|---|---|---|
.sidebar-group.no-border | opt-out | Per-group opt-out of the rail (and therefore the marker too, since the marker has nothing to overlap without the rail). |
Slots
| Slot | Description |
|---|---|
.sidebar-group | Section group, either static div or collapsible details |
.sidebar-group-content | Disclosed-content wrapper with inline-start rail |
.sidebar-group-label | Section header label or collapsible summary |
Tokens
| Token | Default | Description |
|---|---|---|
--sidebar-nav-group-font-size | var(--ui-font-size-xs) | Font size for group labels |
--sidebar-edge-pad | var(--ui-pad-inline-compact) | Inline-start padding for labels and top-level links |
--sidebar-rail-width | 1px | Thickness of the group rail |
--sidebar-rail-color | color-mix(in oklch, var(--sidebar-bg), var(--color-shift) 12%) | Rail resting color, derived from --sidebar-bg |
--sidebar-rail-color-active | color-mix(in oklch, var(--sidebar-bg), var(--color-shift) 28%) | Rail color when the group contains the current link |
--sidebar-rail-marker-color | var(--color-primary) | Color of the current-row segment marker |
--sidebar-group-indent | var(--ui-pad-inline-snug) | Inline indent applied alongside the rail |
Related: Sidebar Link
A single navigation row for a sidebar or drawer, with an icon, a label, and room for trailing text such as a count. It works anywhere inside .sidebar, both in the nav and in the footer. The current page is marked with aria-current rather than a class.
Source: src/css/sidebar-nav.css
Applies to
.sidebar-link
Slots
| Slot | Description |
|---|---|
.sidebar-link-icon | Leading icon slot |
.sidebar-link-meta | Trailing slot for counts, hints, or badges |
Tokens
| Token | Default | Description |
|---|---|---|
--sidebar-link-font-size | var(--ui-font-size-sm) | Font size for sidebar links, set on .sidebar |
--sidebar-icon-size | var(--default-icon-size) | Icon dimensions for the leading slot |