Sidebars
A sidebar appears on the leading side of a view and lets people navigate between sections in your app.
When to use it
Use a sidebar for top-level navigation with up to two levels of nesting. For data, use a list.
Preview
Anatomy
By default the sidebar is a full-bleed strip on the window’s leading edge. It is 240px wide and runs the full height of the window, with no radius, shadow, inset or divider; the window clips it at its corner. The material is a flat, neutral #E6E6E6. Rows are inset 10px, so a selection capsule is 220px wide. In a window, the sidebar also holds the traffic lights (see windows).
The macOS 26 floating panel is still available as .p-sidebar-floating: radius 18px, gray glass at rgba(228, 228, 228, 0.72) over a 20px blur, and a 0 8px 40px shadow at 12%. .p-sidebar-attached still works: it fills the host’s height.
| Class | Role |
|---|---|
.p-sidebar | The strip. 240px, flat #E6E6E6, 10px padding. |
.p-sidebar-floating | Floating glass panel, radius 18px, soft shadow. |
.p-sidebar-attached | Fills the host’s height. |
.p-sidebar-titlebar | 52px header zone: lights at 19,19, first row 52px down. |
.p-sidebar-toggle | Places a 36px round glass button (.p-toolbar-circle) 8px from the top and trailing edges. |
.p-sidebar-row | One row. 36px tall, radius 8px, 15px text at weight 510. |
.p-sidebar-icon | 20px icon slot. Label starts 36px into the row. |
.p-sidebar-detail | Right-aligned secondary text in #BFBFBF. |
.p-sidebar-header | Section heading, 13px bold in #727272, 8px in from the row edge. |
.p-sidebar-chevron | Disclosure chevron, 11px bold in #BFBFBF. |
data-p-level="1..4" | Indentation, 12px per level. |
Sizes
Three sizes step the row height, font, and icon together. The label starts 32px into the row in small and medium, and 36px in large. Image icons take a 4px radius. Indentation stays at 12px per level in every size.
| Size | Class | Row | Font | Icon |
|---|---|---|---|---|
| Large (default) | 36px | 15px / 510 | 20px | |
| Medium | .p-sidebar-medium | 32px | 13px / 510 | 18px |
| Small | .p-sidebar-small | 24px | 11px / 510 | 16px |
Section headers are 13px bold in large and medium and 11px bold in small. They sit in a 43px gap between rows (39px in small).
States
Every row icon carries the accent tint, #0078F0. Selection stays quiet: the capsule darkens the material by 13 levels (rgba(0, 0, 0, 0.056), which gives #D9D9D9 on the strip), and the label does not change. Hover darkens it by 4 levels.
| State | Class | Values |
|---|---|---|
| Rest | Label #1A1A1A, icon #0078F0 | |
| Hover | Fill rgba(0, 0, 0, 0.018) | |
| Selected | .p-selected | Fill rgba(0, 0, 0, 0.056) (#D9D9D9 on the strip) |
| Dimmed | .p-dimmed or aria-disabled="true" | Label #BFBFBF; the icon keeps its tint |
| Inactive window | .p-window-inactive on the window, or .p-inactive | Material lightens to #F1F1F1, icons turn #878787 |
To retint the icons, override the token on the sidebar: style="--p-sidebar-icon: #FF2D55".
Dark mode
The strip becomes #161616. Selection lightens it by 13 levels (#232323) and hover by 7. Icons turn #0A99FF, labels #F5F5F5 and headers #8A8A8A. In an inactive window the strip goes to #141414 and the icons to #666666. Both .p-dark-mode and .p-auto-dark-mode are supported.
Code
<nav class="p-sidebar" aria-label="Mailboxes">
<div class="p-sidebar-row p-selected" tabindex="0" aria-current="page">
<span class="p-sidebar-icon"><img src="inbox.png" alt="" /></span>
Inbox
<span class="p-sidebar-detail">12</span>
</div>
<div class="p-sidebar-header">Smart Folders <span class="p-sidebar-detail">›</span></div>
<div class="p-sidebar-row" data-p-level="1" tabindex="0">Receipts</div>
</nav>Use <nav> with a label, aria-current="page" on the active row, and tabindex="0" so rows are keyboard reachable. The default strip is already opaque. For the floating panel, prefers-reduced-transparency turns the glass opaque #ECECEC (dark: #2B2B2E) and removes the blur, and browsers without backdrop-filter get the same fallback. With prefers-contrast: more the selected row gains a 1px ring.