Default
Show the codeHide the code
Default, code
<Sidebar label="Workspace" />Sidebar
Section navigation down the side, with groups that open. Collapses to a sheet on narrow screens.
- Free core, MIT
- Version 2.0.0-rc.1
- APG pattern: Disclosure navigation
Examples
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
Counts and levels
Show the codeHide the code
Counts and levels, code
const items: SidebarItem[] = [
{ label: 'Home', href: '#home', icon: House },
{ label: 'Team', icon: Users, children: [{ label: 'Members', href: '#members', isCurrent: true }, { label: 'Invites', href: '#invites' }] },
{ label: 'Billing', icon: CreditCard, children: [{ label: 'Plan', href: '#plan' }, { label: 'Invoices', href: '#invoices' }] },
{ label: 'Settings', href: '#settings', icon: Settings },
];
<Sidebar
label="Mail"
items={[
{ label: 'Inbox', href: '#inbox', icon: Inbox, count: 12, countLabel: 'unread' },
{ label: 'Projects', icon: Users, children: [
{ label: 'Alpha', children: [{ label: 'Board', href: '#board', isCurrent: true, count: 3, countLabel: 'open' }, { label: 'Backlog', href: '#backlog' }] },
{ label: 'Beta', href: '#beta' },
] },
{ label: 'Settings', href: '#settings', icon: Settings },
]}
/>Tokens
The 19 design tokens Sidebar reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 19 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.brand-subtle-hover | … | --sd-color-bg-brand-subtle-hover |
| color.bg.canvas | … | --sd-color-bg-canvas |
| color.bg.muted | … | --sd-color-bg-muted |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.brand | … | --sd-color-border-brand |
| color.border.default | … | --sd-color-border-default |
| color.icon.default | … | --sd-color-icon-default |
| color.text.default | … | --sd-color-text-default |
| color.text.secondary | … | --sd-color-text-secondary |
| dialog.scrim | … | --sd-dialog-scrim |
| elevation.3 | … | --sd-elevation-3 |
| layer.modal | … | --sd-layer-modal |
| motion.duration.fast | … | --sd-motion-duration-fast |
| shape.radius-control | … | --sd-shape-radius-control |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| spacing.inset.sm | … | --sd-spacing-inset-sm |
| spacing.stack.md | … | --sd-spacing-stack-md |
| target.min | … | --sd-target-min |
Install
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { Sidebar } from "@superduperui/react"Props
Sidebar also takes the props of the React Aria component it’s built on.
| Prop | Type | What it does |
|---|---|---|
label | stringDefault 'Sections' | Names the navigation landmark (and the mobile sheet). Default "Sections". |
itemsrequired | SidebarItem[] | |
header | ReactNode | Content above the links (workspace switcher, logo). |
footer | ReactNode | Content below the links (account, help). |
defaultExpanded | string[]Default [] | Groups open at first (by label). Groups holding the current page always start open. |
className | string |
When to use it
Use it for
- Apps with many sections (settings, admin, docs)
Use something else for
- A few top-level pages: use Navbar
- Choosing content in place: use Tabs
Accessibility
Screen readers announce "Workspace, navigation" then "Team, button, expanded".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Label it differently from the Navbar
Shared patterns it ships with: 2.4.8 (aria-current="page").
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 250 text runs: 0 below 7:1, lowest 8.42:1 |
| Target size | 86 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 108 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 5 of 5, Firefox 5 of 5, WebKit 5 of 5 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the first link |
| Tab | Tab reaches the Team group button, open because it holds the current page |
| Tab | Tab enters the group |
| Tab | Tab reaches the closed Billing group |
| Enter | Enter opens it |
In Figma
The Figma component is Sidebar, with Layout (Wide, Narrow, Narrow open). The Figma library isn’t published yet.
Figma to code: Layout (Wide, Narrow, Narrow open; preview only); Header → header; Footer → footer; nested Item → items.