Skip to main content
Frontend Glossary

UI components · Navigation

Steps

Also called: Stepper, Progress steps, Step indicator, Progress tracker

A row of numbered nodes connected by lines that shows every step of a multi-step process and which step the user is on.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Add a horizontal steps bar at the top of a multi-step form with three steps: "Your info," "Review order," and "Payment." Completed steps show a check mark, the current step uses a solid dark circle and bold text, and steps not yet started are gray hollow circles, with thin lines connecting the steps. Only allow "Next" once the current step passes validation, and let users click back to completed steps to edit them.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Steps is what you need.

Use Steps when

  • Multi-step flows with a fixed order, like sign-up, checkout, or activating a service
  • A form too big for one screen that's split into 3 to 5 steps, where users need to know how many are left
  • Progress where you need to show the current stage, like approvals or shipping

Pick something else when

  • Blocks of content that are independent and can be viewed in any order

    Use insteadTabs

  • Showing a page's position in the site hierarchy

    Use insteadBreadcrumb

  • A simple two-step flow, where one form plus a confirmation dialog is enough

  • Continuous percentage progress like a file upload. Use a progress bar.

    Use insteadProgress

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Turning unrelated blocks of content into steps, forcing users to click through them in order

  2. 02

    Eight or nine steps that don't fit horizontally, so every step name gets squashed into an ellipsis

  3. 03

    Steps out of sync with the actual form, like being on step three while step two still doesn't show as complete

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

Several step nodes (number or icon, title, optional description) with connecting lines between them. Each node can be completed, in progress, or not started.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

Steps break a longer task into a few stages, laid out horizontally or vertically, like "1 Your info → 2 Review order → 3 Payment." Completed steps get a check mark, the current step is highlighted, and steps not yet started are grayed out, so users can see at a glance how many steps there are and how many are left.

The key difference from tabs is order. Steps depend on each other in sequence, and you usually have to finish the current step and pass validation before moving on. Tabs hold independent content you can switch between freely. Steps also differ from a breadcrumb, which shows a page's level in the site hierarchy, not progress.

3 to 5 steps is about right. Steps only display progress. The actual "Back" and "Next" buttons usually go at the bottom of the form.

Developer info
Term ID
component-steps
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • ol:has(> li[aria-current="step"])
  • .ant-steps
  • .el-steps
  • [class*="MuiStepper-root"]
  • .arco-steps
  • .t-steps
  • .n-steps
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026