use UI

Breadcrumb vs Stepper

Both answer “where am I”, but in different spaces. A breadcrumb is spatial: it describes where the page sits in the hierarchy, and it is identical for everyone who lands there, by whatever route. A stepper is temporal: it describes how far through a task you are, and it changes as you go. That is why one is navigation and the other is status. Getting them confused produces the two familiar mistakes — a “breadcrumb” that lists the user's history, which the back button already handles, and a “stepper” whose steps cannot be clicked, which is just a progress bar wearing a costume.

Where this page sits in the site is a breadcrumb. How far through a task you are is a stepper.

Breadcrumb

A trail of links showing the current page's ancestors in the site hierarchy, ending with the page itself.

Reach for it when

  • The site is deep enough that “one level up” is a question worth answering — docs, catalogues, file browsers.
  • People arrive from search, straight into level four, with no idea what sits above them.
  • Sibling and parent pages are worth reaching, and a breadcrumb makes them one click away.
  • The hierarchy is real and stable. A breadcrumb is only honest if the parent genuinely contains the child.

Avoid it when

  • The site is flat. Two levels of hierarchy do not need a trail; a single back link is clearer.
  • You want to show the user's path through the site. That is history, and the back button already owns it.
  • The page has no single parent — a product in five categories has no honest trail to draw.
  • It is the only navigation on the page. A breadcrumb supplements orientation; it does not replace a nav.

Stepper

An ordered indicator of the steps in a process, showing which are done, which is current, and which are still ahead.

Reach for it when

  • A task genuinely has to be split — checkout, onboarding, anything where later steps depend on earlier answers.
  • The user needs to know the size of the commitment before starting. “Step 1 of 3” is the whole point.
  • Steps can be returned to, and seeing the earlier ones makes going back obvious rather than a guess.
  • The order is real. If steps can be done in any sequence, they are sections, not steps.

Avoid it when

  • The form is short enough to show at once. Splitting eight fields across three screens adds clicks and nothing else.
  • The number of steps is unknown or changes as you go — a stepper that grows breaks the promise it made.
  • There are only two steps. That is a form and a confirmation, not a process worth charting.
  • You want to show hierarchy rather than sequence. That is a breadcrumb.