← SiteViviana UI
07

Navigation

Ways through: tabs, breadcrumbs, links, disclosure, steps.

Tabs · vertical — the register rail: Well-mounted rows, caret ghosts in on hover and pins on the active row, count pill parks flush right
Tabs · pill — the glass tab bar: stacked pixel icon over micro label, spread space-around, never collapses
Tabs · 3 tabs — accent underline on select, mono labels
Breadcrumbs · items collection — children is a per-item render function (Breadcrumb ≡ BreadcrumbItem)
  1. Home
  2. Projects
  3. Glasselated
  1. Root
  2. Docs
Link · standalone, quiet
Primary linkSecondary linkStandaloneQuiet standalone
Accordion · 3 items — header/title/panel pieces

Register goals and scope.

Disclosure · single

DisclosureGroup · explicit header/title

StepList · selected step — first step keeps the completed fill off
  1. Current:
  2. Not completed:
  3. Not completed:
StepList · Step / StepListItem primitives — bespoke step rendering escape hatch
  1. 1. Details
  2. 2. Review
  3. 3. Confirm
  1. 1. Details
  2. 2. Review
  3. 3. Confirm