Multi Step Navigation

Source: Figma — Lexicon Components. Horizontal stepper. States: .is-complete (dark filled + check), .is-active (primary blue + number), pending (light + number). Connector colour follows the completed step.

Six steps · all labelled · step 3 active
  1. Step Name
  2. Step Name
  3. Step Name 3
  4. Step Name 4
  5. Step Name 5
  6. Step Name 6
Compact — only the active step is labelled, with overflow ellipsis
  4. Step Name
  5. 5
Three steps · 1 complete + active 2 + pending 3
  2. Step Name 2
  3. 3
Two steps · complete + active
  2. Step Name 2