Sidebar
Primary app navigation. Expanded 280px with search and account; collapsed 80px icon rail.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div style="height:440px;width:100%;display:flex;border:1px solid var(--px-color-border-neutral-subtle);border-radius:12px;overflow:hidden">
<aside class="px-sidebar">
<div class="px-sidebar__brand"><span class="px-sidebar__mark"><svg class="px-icon" aria-hidden="true">…</svg></span><span class="px-sidebar__name">Pixels</span><button type="button" class="px-icon-btn" style="margin-inline-start:auto" data-px-sidebar-toggle aria-expanded="true" aria-label="Collapse sidebar"><svg class="px-icon" aria-hidden="true">…</svg></button></div>
<div class="px-input px-input--sm"><svg class="px-icon" aria-hidden="true">…</svg><input placeholder="Search" aria-label="Search"></div>
<nav class="px-sidebar__nav" aria-label="Main">
<a class="px-nav-item" href="#" aria-current="page"><svg class="px-icon" aria-hidden="true">…</svg><span class="px-nav-item__label">Home</span></a>
<a class="px-nav-item" href="#"><svg class="px-icon" aria-hidden="true">…</svg><span class="px-nav-item__label">Dashboard</span><span class="px-count px-count--sm">10</span></a>
<a class="px-nav-item" href="#"><svg class="px-icon" aria-hidden="true">…</svg><span class="px-nav-item__label">Projects</span></a>
<a class="px-nav-item" href="#"><svg class="px-icon" aria-hidden="true">…</svg><span class="px-nav-item__label">Team</span></a>
<a class="px-nav-item" href="#"><svg class="px-icon" aria-hidden="true">…</svg><span class="px-nav-item__label">Settings</span></a>
</nav>
<div class="px-sidebar__foot"><span class="px-avatar-label"><span class="px-avatar px-avatar--sm">OR</span><span class="px-avatar-label__text"><span class="px-avatar-label__name">Olivia Rhye</span><span class="px-avatar-label__meta">olivia@pixels.io</span></span></span></div>
</aside>
<div style="flex:1;background:var(--px-color-surface-sunken)"></div>
</div>Usage
- Collapsed items show the icon only; pair with a Tooltip.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-sidebar · --collapsed | class | Expanded / collapsed. |
px-nav-item | class | Link; aria-current="page" when selected. |
data-px-sidebar-toggle | attribute | Collapse button. |
Figma properties
Sidebar4 variants · page “Application navigation”Open
Primary app navigation. Expanded 280px with search and account; Collapsed 80px icon rail. Sits on the inline-start edge: left in LTR, right in RTL. Use <nav aria-label="Main">.
| Property | Type | Values |
|---|---|---|
| Collapsed | Variant | False True |
| Direction | Variant | LTR RTL |
Nav item16 variants · page “Application navigation”Open
Sidebar navigation link with icon, label and optional count. Selected marks the current section (aria-current="page"). Collapsed shows the icon only; pair it with a Tooltip.
| Property | Type | Values |
|---|---|---|
| Label | Text | “Home” |
| Icon | Instance swap | — |
| Count | Boolean | — |
| Collapsed | Variant | False True |
| State | Variant | Default Hover Focused Selected |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-nav-border | color-border-neutral-subtle | #f2f4f7 |
--px-nav-item-icon | color-content-neutral-tertiary | #667085 |
--px-nav-item-radius | radius-12 | 12px |
--px-nav-item-height | spacing-40 | 40px |
--px-sidebar-width | size-264 | 264px |
--px-sidebar-padding | spacing-12 | 12px |
--px-sidebar-gap | spacing-12 | 12px |
--px-sidebar-radius | radius-20 | 20px |
--px-nav-item-padding-x | spacing-12 | 12px |
--px-nav-item-gap | spacing-12 | 12px |
Accessibility
- Use <nav aria-label="Main">.