Sidebar
Project sidebar navigation: a fixed-width vertical column with a project header, section labels, and .sidebar-item links. Use .sidebar-group (<details name="sidebar">) for collapsible sections with zero-JS exclusive-accordion behavior.
Root: .sidebar on <aside>
Example
Example
<aside class="sidebar"><div class="sidebar-header"><span class="avatar avatar-sm avatar-square">P</span><div><div class="sidebar-title">Project</div><div class="sidebar-subtitle">Software project</div></div></div><details class="sidebar-group" name="sidebar" open><summary class="sidebar-section">Planning</summary><a class="sidebar-item active" href="#">Board</a><a class="sidebar-item" href="#">Backlog</a></details></aside>Contract
Structure
| Selector | Required | Description |
|---|---|---|
.sidebar-header | optional | Project identity row: square avatar plus a min-width:0 wrapper holding .sidebar-title and .sidebar-subtitle (both truncate). |
.sidebar-item | optional | Navigation links; mark the current view with .active (selected background). |
.sidebar-section | optional | Uppercase section label — either a plain div, or the <summary> of a .sidebar-group. |
Accessibility
| On | Attribute | Level | When |
|---|---|---|---|
.sidebar-item.active | aria-current | recommended | Recommended on the active item so assistive tech announces the current view (aria-current="page"). |
Wrap link runs in <nav> or use <aside> + labelled nav for landmark navigation. In .sidebar-group the <summary> is the toggle and is keyboard-operable for free; keep .sidebar-section on the summary so the disclosure triangle renders. Pair .active with aria-current="page".
Nesting
Allowed in:
app shell, alongside the main content area, below the navbar
Never inside (or containing):
.sidebar