NavigationBrowse navigation components
Stepper
Numbered wizard with auto-counter, complete (✓) state, current state, and connecting lines.
Live preview
- Connect identity
- Map roles
- Invite admins
- Review
Usage
Adapters:React stableVue stable
index.html
<ol class="lm-stepper" aria-label="Onboarding">
<li class="lm-step lm-step-complete"><span class="lm-step-marker"></span>Connect</li>
<li class="lm-step" aria-current="step"><span class="lm-step-marker"></span>Map roles</li>
</ol>CSS classes (4)
| Class | Description |
|---|---|
lm-stepper | Ordered list with auto counter-reset |
lm-step | Each step; aria-current='step' = active |
lm-step-complete | Renders ✓ instead of number |
lm-step-marker | Numbered/checked circle |
React props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
current | number | — | Active step index |
orientation | horizontal | vertical | — | — |
Accessibility
- Use aria-current='step' on the active step.
- Pair with aria-label='Progress'.
Spotted something wrong? Edit this entry on GitHub.