UX Patterns Guide

Foundation · lesson 3 of 21 · Navigation And Wayfinding

Breadcrumbs

Underlying principle: Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.

Show a canonical ancestor trail from the broadest relevant parent to the current page, with ancestor links and a clear current-page item.

Start with the decision

Does this fit your task?

Pages sit inside a clear parent-child hierarchy.

Review the boundary: Compare the task with the alternatives in the decision section.

Review the decision →
Try the live example →Compare alternatives →
Study the interaction

Follow the task before choosing the component

Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.

01 / Recognize the need

What the person is doing

The product has a parent-child information architecture deeper than one or two obvious levels.

02 / Design the response

What the interface must communicate

Show a canonical ancestor trail from the broadest relevant parent to the current page, with ancestor links and a clear current-page item.

Interior page with full ancestor trail.

03 / Judge the outcome

What to look for

Would this same URL show the same breadcrumb trail if the user arrived from search, a notification, or a saved link?

Interior page with full ancestor trail.

Practice this pattern: Sketch breadcrumbs for this situation: Pages sit inside a clear parent-child hierarchy. Include this state: Interior page with full ancestor trail. Review your sketch with this question: Would this same URL show the same breadcrumb trail if the user arrived from search, a notification, or a saved link?

Study the Navigation And Wayfinding family →Read the underlying principle →
Decision first

Choose this pattern when the problem matches

Use when

  • Pages sit inside a clear parent-child hierarchy.
  • Users frequently land on deep pages from outside the normal navigation path.
  • Users need quick upward movement to parent sections or collections.

Avoid when

  • The flow is linear task progress rather than site hierarchy.
  • Primary navigation already makes the current location and parent section obvious.
  • The supposed trail would be generated from recent clicks or browser history.

Problem it prevents

The product has a parent-child information architecture deeper than one or two obvious levels.

Test the behavior

Try strong and weak versions of the interaction

Open the working example, try its controls, and compare the behavior against the decision guidance.

In the lab you can
  • switch between strong UI, weak UI, strong UX, and weak UX;
  • trigger required, empty, loading, error, and recovery states;
  • inspect keyboard and accessibility expectations beside the demo.
Launch Breadcrumbs in the lab
Pattern anatomy

What a strong implementation has to make clear

User need

The product has a parent-child information architecture deeper than one or two obvious levels.

Pattern promise

Show a canonical ancestor trail from the broadest relevant parent to the current page, with ancestor links and a clear current-page item.

Required state

Interior page with full ancestor trail.

Failure to inspect

Displaying previous clicks as breadcrumbs.

Access contract

Place the trail in a labeled nav element.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • Home, Projects, Migration, and Runbook appear in hierarchy order with ancestor links and Runbook marked current.
  • A mobile variant keeps the direct parent link visible instead of hiding every meaningful ancestor.
  • Opening a saved deep link still shows the same parent path and lets users jump to Migration or Projects.
  • In a form flow, the breadcrumb stays anchored to the starting page's site hierarchy while progress is shown separately.
Weak implementation

Vague, hidden, hard to recover from

  • Recent clicks are displayed as if they were the page hierarchy.
  • The breadcrumb changes after every click, so the same page shows different trails for different users.
  • Users try to move up to a parent section but the crumb returns them to the previous history entry instead.
  • Displaying previous clicks as breadcrumbs.
UI guidance
  • Render a labeled breadcrumb nav as an ordered hierarchy from the broadest relevant ancestor to the current page, with real ancestor links and a distinct current-page item.
  • Keep separators decorative, preserve meaningful labels, and collapse only in ways that keep the direct parent reachable on narrow screens.
UX guidance
  • Orient users who arrive deep in a site by exposing the canonical parent-child relationship for the current page.
  • Let users move upward to parent sections without relying on browser Back, click history, or a linear step indicator.
Implementation contract

What the implementation must handle

States

  • Interior page with full ancestor trail.
  • Ancestor links that navigate to parent levels.
  • Current page item identified visually and programmatically.
  • Long-label or narrow-screen state that preserves at least the direct parent destination.

Interaction

  • Interior page with full ancestor trail.

Accessibility

  • Place the trail in a labeled nav element.
  • Use an ordered list so assistive technology can convey item count and order.
  • Keep separators decorative and hidden from screen readers.
  • Ancestor links follow normal link focus and activation behavior.

Review

  • Would this same URL show the same breadcrumb trail if the user arrived from search, a notification, or a saved link?
  • Does every crumb represent a parent destination users can understand before activating it?
  • Would a tab, step indicator, side navigation, or bottom navigation better represent the relationship being shown?
Evidence trail

Source-backed claims behind this guidance

WAI-ARIA APG Breadcrumb Pattern

W3C Web Accessibility Initiative - checked

APG documents hierarchical parent-page links, labeled navigation landmarks, and aria-current behavior for the current page.

GOV.UK Design System Breadcrumbs

GOV.UK Design System - checked

GOV.UK documents multi-level site use, flat-site and linear-journey exclusions, placement before main content, and home-to-parent trails.

USWDS Breadcrumb

U.S. Web Design System - checked

USWDS documents current-location orientation, parent navigation, ordered-list markup, current-page semantics, and mobile/truncation guidance.

VA.gov Design System Breadcrumbs

VA.gov Design System - checked

VA documents deeper hierarchy thresholds, consistent placement, mobile parent-link collapse, hierarchy-not-click-path behavior, and linear-flow constraints.

Full agent/debug reference

Problem Context

  • The product has a parent-child information architecture deeper than one or two obvious levels.
  • Users can arrive at interior pages from search, external links, saved URLs, or notifications.
  • The current page title alone does not show which section or parent collection owns the page.

Selection Rules

  • Choose breadcrumbs when the current page has meaningful ancestor pages that help users orient and move upward.
  • Use the canonical site or product hierarchy, not the user's click path, recent history, or task progress.
  • Keep each ancestor crumb tied to a real destination whose page title or label matches the crumb.
  • Place breadcrumbs consistently near the top of the page before the main content they orient.
  • On small screens, collapse cautiously to the immediate parent only when the full trail would crowd the layout.

Required States

  • Interior page with full ancestor trail.
  • Ancestor links that navigate to parent levels.
  • Current page item identified visually and programmatically.
  • Long-label or narrow-screen state that preserves at least the direct parent destination.
  • Linear-flow state where the breadcrumb remains tied to the site hierarchy instead of advancing step by step.

Interaction Contract

  • Activating an ancestor crumb moves to that ancestor page without implying a back-in-history action.
  • The trail remains stable for the same URL no matter how the user arrived.
  • The current item is not confused with another parent link; when it is a link, it exposes aria-current="page".
  • Separators are visual only and are not announced as extra links or destinations.

Implementation Checklist

  • Use a navigation landmark with an accessible name such as Breadcrumb.
  • Render crumbs as an ordered list in hierarchy order from broad to specific.
  • Link ancestor crumbs to real parent destinations and keep labels aligned with destination page titles.
  • Expose the current page with aria-current or equivalent current-page text.
  • Hide decorative separators from assistive technology.
  • Do not replace primary navigation, task progress, or a back link with breadcrumbs.

Common Generated-UI Mistakes

  • Showing browsing history instead of hierarchy.
  • Using breadcrumbs on a flat app where no ancestor path exists.
  • Using breadcrumbs to show steps in a form or checkout journey.
  • Duplicating primary navigation with a long list of unrelated destinations.
  • Collapsing away the direct parent link users need most.

Critique Questions

  • Would this same URL show the same breadcrumb trail if the user arrived from search, a notification, or a saved link?
  • Does every crumb represent a parent destination users can understand before activating it?
  • Would a tab, step indicator, side navigation, or bottom navigation better represent the relationship being shown?
Accessibility
  • Place the trail in a labeled nav element.
  • Use an ordered list so assistive technology can convey item count and order.
  • Mark the current page with aria-current="page" when the current crumb is a link, or use equivalent current-page text when it is not.
  • Keep separators decorative and hidden from screen readers.
Keyboard Behavior
  • Ancestor links follow normal link focus and activation behavior.
  • Current-page behavior is predictable: either it is not focusable or, if linked, it is clearly marked current.
  • Collapsed breadcrumb controls must be reachable and must not hide the direct parent destination.
Variants
  • Full breadcrumb trail
  • Collapsed middle crumbs
  • Mobile direct-parent breadcrumb
  • Current-page-linked breadcrumb

Verification

Source trail checked:

Saved items