Stepper

Updated 2026-05-14

Confidence anatomy medium variants medium motion high a11y high content high

Overview

Use to guide a user through a linear process with defined steps (e.g., Onboarding). Indicates current, completed, and upcoming steps.

1
Container
the navigation region — typically a landmark role (nav/banner)
2
Items
individual navigable entries; one is marked "current" when applicable
3
Item label
short, scannable text; never sentence case
4
Item icon (optional)
reinforces meaning at a glance; not a substitute for label
5
Active indicator
visual treatment for the current item — underline, bar, fill, or background
6
Trigger (optional)
opens a dropdown/menu for grouped or contextual items

hover/focus transitions on items stay subtle — no large translation

dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button