Navigation

Wayfinding that slides instead of snapping.
Indicators are physical objects: a glass thumb, a glowing underline. They travel to the new position on the spring.
OverviewComponentsTokensChangelog
Tabs · Segmented
live
Tabs
Breadcrumb
Pagination
<Tabs> · <ButtonGroup segmented> · <Breadcrumb> · <Pagination page={1} total={12}>
Tab bar · Steps
phone width
TabBar
Account
Done
Workspace
Current
Invite team
Next
<TabBar> floats off the edge on the functional glass tint · <Steps segmented current={1}>
Navbar · Sidebar
glass-tint shells
Navbar
Sidebar
Canvas
Docs
Components
Tokens
Changelog
⌘K
<Navbar> · <Sidebar> · glass comes from <ThemeProvider glass>, never a prop
Tabs · pill · vertical · badges
live

General

Name, URL and region. Shown to everyone in the workspace.
<Tabs> underline · <Tabs pills> · <Tabs vertical> · every variant takes a count badge
Steps · vertical · with progress
3 of 4
Steps
Create workspace
Riskora · EU Frankfurt
Connect repository
bnannier/canvas · main
3
Import components
Restyling 72 of 107
4
Invite your team
Optional
<Steps vertical> · horizontal is the default · the current step carries its own progress
RowMenu
actions · links
RowMenu
Profile
Notifications
3 new
Integrations
3
<RowMenu> · every row icon names a real glyph · destructive rows sit last, behind a hairline