composite pattern · Menus and navigation
Steps
A sequence indicator for a multi-stage task that names completed, current, and upcoming steps, often with numbered markers and connectors.
Decisive boundary
Steps represent named stages in one task; use Pagination for collection pages, Breadcrumbs for hierarchy, and Progress Bar for an unnamed percentage.
Definition and intent
What is a Steps UI pattern?
Use the behavior, not the silhouette
A sequence indicator for a multi-stage task that names completed, current, and upcoming steps, often with numbered markers and connectors. The term is used here as a composite pattern made from multiple controls or regions that must work together. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.
Show where users are in a multi-stage workflow and what stages are complete or still ahead. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.
Know when the label is wrong
The fastest way to identify a pattern is often to reject the nearest alternative. For Steps, the boundary is: Steps represent named stages in one task; use Pagination for collection pages, Breadcrumbs for hierarchy, and Progress Bar for an unnamed percentage.
Do not implement it as Pagination for result pages, Breadcrumbs for site location, and a numeric Stepper input that increments one value. If those requirements describe the real task better, use the related pattern page or the full Menus and navigation comparison before writing code.
Decision process
Decide before choosing a component
Record these requirements in plain language. A library component name is not a substitute for the contract.
Confirm the user job
Show where users are in a multi-stage workflow and what stages are complete or still ahead.
Define opening and closing
The current stage changes when the user completes, revisits, or is allowed to navigate to another task step. Not dismissed; it remains for the duration of the multi-step flow.
Specify access behavior
A passive indicator does not receive focus; clickable steps are real controls with clear disabled and current states. Interactive step labels follow normal keyboard order and expose the controlled step content; the current item is programmatically identified.
Reject the near miss
Pagination for result pages, Breadcrumbs for site location, and a numeric Stepper input that increments one value.
Behavior contract
What must survive the build
- trigger
- The current stage changes when the user completes, revisits, or is allowed to navigate to another task step.
- dismissal
- Not dismissed; it remains for the duration of the multi-step flow.
- modality
- Non-modal progress and optional navigation structure.
- focus
- A passive indicator does not receive focus; clickable steps are real controls with clear disabled and current states.
- keyboard
- Interactive step labels follow normal keyboard order and expose the controlled step content; the current item is programmatically identified.
- interactive
- May be read-only in a linear flow or allow navigation among completed and permitted steps.
- persistence
- Reflects one source of truth for completed, current, and upcoming stages.
- placement
- Above a horizontal workflow or beside a vertical multi-step form.
- mobile
- Use vertical, compact, text, dots, or progress variants when full labels cannot fit without overflow.
Failure modes
Common wrong builds
- Keeping completed state separate from the current-step source of truth.
- Making future steps clickable when the flow forbids skipping.
- Letting horizontal labels overflow on mobile.
Observable checks
Verify the result
- Exactly one step is identified as current.
- Completed and upcoming states derive from the current workflow state.
- Interactive steps expose their controlled content.
- Disabled future steps cannot be activated.
- The mobile variant keeps labels and controls readable without horizontal scrolling.
Coding-agent handoff
Implementation brief template
Pattern: Steps Purpose: Show where users are in a multi-stage workflow and what stages are complete or still ahead. Trigger: The current stage changes when the user completes, revisits, or is allowed to navigate to another task step. Dismissal behavior: Not dismissed; it remains for the duration of the multi-step flow. Modality: Non-modal progress and optional navigation structure. Focus behavior: A passive indicator does not receive focus; clickable steps are real controls with clear disabled and current states. Keyboard behavior: Interactive step labels follow normal keyboard order and expose the controlled step content; the current item is programmatically identified. Interactive content: May be read-only in a linear flow or allow navigation among completed and permitted steps. Placement: Above a horizontal workflow or beside a vertical multi-step form. Mobile behavior: Use vertical, compact, text, dots, or progress variants when full labels cannot fit without overflow. Do not implement as: Pagination for result pages, Breadcrumbs for site location, and a numeric Stepper input that increments one value. Acceptance checks: - Exactly one step is identified as current. - Completed and upcoming states derive from the current workflow state. - Interactive steps expose their controlled content. - Disabled future steps cannot be activated. - The mobile variant keeps labels and controls readable without horizontal scrolling.
Claim-level references
Sources, not a confidence score
Frequently asked questions
Steps UI pattern questions
Direct answers based on the reviewed behavior contract above.
What is a Steps in web UI?
A sequence indicator for a multi-stage task that names completed, current, and upcoming steps, often with numbered markers and connectors. In this reference set it is a composite pattern made from multiple controls or regions that must work together.
When should I use a Steps?
Show where users are in a multi-stage workflow and what stages are complete or still ahead. The decisive boundary to confirm is this: Steps represent named stages in one task; use Pagination for collection pages, Breadcrumbs for hierarchy, and Progress Bar for an unnamed percentage.
What keyboard and focus behavior does a Steps need?
Interactive step labels follow normal keyboard order and expose the controlled step content; the current item is programmatically identified. A passive indicator does not receive focus; clickable steps are real controls with clear disabled and current states. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.
How should a Steps behave on mobile?
Use vertical, compact, text, dots, or progress variants when full labels cannot fit without overflow. Its modality is a separate requirement: Non-modal progress and optional navigation structure.
How do I verify a Steps implementation?
Start with observable checks: Exactly one step is identified as current. Completed and upcoming states derive from the current workflow state. Interactive steps expose their controlled content. Then verify the remaining checks and compare the result with the linked source guidance.