UX Patterns Guide
UI + UX Navigation And Wayfinding standard

Breadcrumbs

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

Open in lab Compare alternatives
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 app has a flat structure with no meaningful parent levels.
  • 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

Users land inside a nested information architecture and need to understand where the current page sits without retracing their path.

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.

Recovery path

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 trail is a row of vague labels such as Back, More, and Current with no current-page semantics.
  • 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.
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

  • 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.

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.

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?
Interactive lab

Inspect the states before you copy the pattern

Move through hierarchy

Step deeper and back up, then check whether the current location remains clear.

Breadcrumbs
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Interior page with full ancestor trail.

Keyboard / Access

Ancestor links follow normal link focus and activation behavior.

Avoid Generating

Showing browsing history instead of hierarchy.
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

Last verified: