Sidebar

Props

id

string?

nav

list?

find

any?

foot

string?

label

string?

action

any?

sections

list?

Anatomy

• panel272 px wide on a computer; a drawer of up to 320 px on a phone; background color.bg.raised; line color.line.base
• actionthe one thing to start: New chat, Go live, New post; minHeight size.tap; radius radius.md; color color.text.primary; icon color.accent.base
• linkthe page you are on: color.accent.base icon on a tint of it, color.text.primary; minHeight size.tap; radius radius.md; color color.text.muted; icon size.icon
• countbackground color.accent.strong; size type.size.caption; weight type.weight.heavy; radius radius.pill
• section headinguppercase; color color.text.muted; size type.size.caption; weight type.weight.heavy
• itemone line, a mark before it and a time or a dot after it; color color.text.primary; size type.size.body; hover color.bg.hover

Behaviour and access

Keyboard

Keeps the focused control in view

Outside tap

Leaves it open

Scroll

Locks the page while open

Reduced motion

Remove movement; keep the state change.

Name

its label (the product)

Target

rows 38 px, 44 px with their gap on touch

Focus

Tab down the rows; Enter opens; Escape closes the drawer and focus returns

States

• default
• current
• focused
• open

Tokens

• color.bg.raised
• color.line.base
• size.tap
• radius.md
• color.text.primary
• color.accent.base
• color.text.muted
• size.icon
• color.accent.strong
• type.size.caption
• type.weight.heavy
• radius.pill
• type.size.body
• color.bg.hover