Behavior comparison
Breadcrumbs vs Stepper
Decisive difference
Breadcrumbs show where the page sits in an existing hierarchy; Stepper shows where the user stands in an ordered process.
Choice criteria, links and sources
- BreadcrumbsChoose Breadcrumbs if pages have ancestors and the user may go up a level.Open entry Breadcrumbs
- StepperChoose Stepper if a linear process has completed, current, and upcoming stages.Open entry Stepper
See the nine dimensionsSee the sources
Orient within a journey
Try it
Should this locate the page in a hierarchy, move across result pages, or show a process stage?
Breadcrumbs
Shared trial context
Breadcrumbs
Mission
Breadcrumbs
Focus the Settings ancestor, activate it, and verify the destination replaces the current Billing location.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- Current Billing is exposed separately from the ancestor links.
- Edge case
- Long localized labels wrap or collapse without turning separators into controls or losing accessible names.
Stepper
Mission
Stepper
Use the separate Next and Back actions, verifying step statuses and the screen heading after every change.
- Details completed
- Documents current
- Review upcoming
2 / 3 — Documents
Segments communicate status; separate buttons control the workflow.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- Documents is current, Details is complete, and Review is upcoming.
- Edge case
- Returning to a completed step preserves entered data and recomputes statuses without making decorative segments clickable.
What this example shows
Breadcrumbs expose the current page’s ancestry; Pagination moves among quantity-split peer pages, while Stepper tracks meaningful process stages.
Which fits your need?
Breadcrumbs
Pages belong to a hierarchy several levels deep
Stepper
A stable linear process has at least three meaningful sections
Difference and sources
Breadcrumbs expose the current page’s ancestry; Pagination moves among quantity-split peer pages, while Stepper tracks meaningful process stages.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Trail
The ordered sequence that communicates the surrounding hierarchy.
Decision
Family question
Should this locate the page in a hierarchy, move across result pages, or show a process stage?
Three criteria to choose
- Use case
Breadcrumbs
Pages belong to a hierarchy several levels deep
Stepper
A stable linear process has at least three meaningful sections
- Interactivity
Breadcrumbs
Ancestor items are links; the current page is identified and is usually plain text.
Stepper
Primarily communicates completed, current, and upcoming stages; a stage is interactive only when navigation is truly allowed.
- Accessible role
Breadcrumbs
nav[aria-label] > ol > li > a[aria-current=page]
Stepper
ol > li[aria-current=true] + heading
Nine dimensions
- Trigger
Breadcrumbs
Following a named ancestor link moves upward in the current hierarchy.
Stepper
The surrounding workflow advances or returns between meaningful process stages.
- Modality
Breadcrumbs
Non-modal navigation; the current page remains fully available.
Stepper
Non-modal progress context for a multi-step task; it does not block the current step.
- Placement
Breadcrumbs
A compact trail before the main heading, ordered from root to current page.
Stepper
Near the workflow heading, ordered from the first stage to the final stage.
- Interactivity
Breadcrumbs
Ancestor items are links; the current page is identified and is usually plain text.
Stepper
Primarily communicates completed, current, and upcoming stages; a stage is interactive only when navigation is truly allowed.
- Focus
Breadcrumbs
Visible focus remains on each ancestor link until navigation; a plain-text current page is not an extra tab stop.
Stepper
After an in-place stage change, focus the new step heading or use one documented equivalent; never focus a decorative segment.
- Dismissal
Breadcrumbs
Breadcrumbs are persistent navigation and are not dismissible.
Stepper
The indicator is persistent workflow context and is not dismissible.
- Accessible role
Breadcrumbs
nav[aria-label] > ol > li > a[aria-current=page]
Stepper
ol > li[aria-current=true] + heading
- Use case
Breadcrumbs
Pages belong to a hierarchy several levels deep
Stepper
A stable linear process has at least three meaningful sections
- Mobile behavior
Breadcrumbs
Preserve the current location and nearest ancestor without making essential hierarchy depend on horizontal scrolling.
Stepper
Keep a concise “step X of Y” heading and hide secondary labels before compressing the status beyond recognition.
| Dimension | BreadcrumbsBreadcrumbs | StepperStepper |
|---|---|---|
| Trigger | Following a named ancestor link moves upward in the current hierarchy. | The surrounding workflow advances or returns between meaningful process stages. |
| Modality | Non-modal navigation; the current page remains fully available. | Non-modal progress context for a multi-step task; it does not block the current step. |
| Placement | A compact trail before the main heading, ordered from root to current page. | Near the workflow heading, ordered from the first stage to the final stage. |
| Interactivity | Ancestor items are links; the current page is identified and is usually plain text. | Primarily communicates completed, current, and upcoming stages; a stage is interactive only when navigation is truly allowed. |
| Focus | Visible focus remains on each ancestor link until navigation; a plain-text current page is not an extra tab stop. | After an in-place stage change, focus the new step heading or use one documented equivalent; never focus a decorative segment. |
| Dismissal | Breadcrumbs are persistent navigation and are not dismissible. | The indicator is persistent workflow context and is not dismissible. |
| Accessible role | nav[aria-label] > ol > li > a[aria-current=page] | ol > li[aria-current=true] + heading |
| Use case | Pages belong to a hierarchy several levels deep | A stable linear process has at least three meaningful sections |
| Mobile behavior | Preserve the current location and nearest ancestor without making essential hierarchy depend on horizontal scrolling. | Keep a concise “step X of Y” heading and hide secondary labels before compressing the status beyond recognition. |