Skip to content
UX Atlas
Plate CMP·020 · ComponentGrid E1 · Rev. 2026-08-14

Breadcrumb

A trail showing where you are in a hierarchy, useful when the hierarchy is deeper than two levels.

ComponentCraft conventionFoundational

Definition

Breadcrumbs display the path from the root to the current location, with each ancestor as a link. They orient users who arrive from search and provide a fast route back up.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Rules
  3. 3Building the trail
  4. 4In practice
  5. 5Local chart
  6. 6Continue from here

Reach for this when

  • Hierarchies three or more levels deep.
  • Significant traffic arrives from search.

Common mistakes

  • Breadcrumbs reflecting navigation history.
  • Used on flat sites.
  • Truncation that hides the parent.

Rules

  • Reflect hierarchy, not history. A breadcrumb is not a back button.
  • The current page appears last, unlinked, marked with aria-current page.
  • Wrap in a nav element with an accessible name such as Breadcrumb, and use an ordered list.
  • Truncate the middle on small screens rather than the ends, since the root and the parent are the useful ones.
  • Add structured data where search visibility matters.
  • Skip breadcrumbs entirely for flat structures. They add noise without information.

Building the trail

Do

  • Show the path from the root, with every ancestor linked.
  • Truncate the middle when space runs out, keeping the root and the immediate parent.
  • Mark the current page with aria-current and leave it unlinked.
  • Use the same labels as the navigation, so the two agree.

Do not

  • Reconstruct the route the reader took. That is history, not hierarchy.
  • Add a breadcrumb to a flat structure to look thorough.
  • Truncate from the end, which removes the level nearest the reader.
  • Rely on a raw > character with no accessible separator handling.

In practice

  1. i.

    Arriving from search

    Why the trail earns its space

    A reader landing on a deep page from a search result has no idea where it sits. The breadcrumb is the only element on the page that answers that, and it answers it before the content is read.

  2. ii.

    The trail that lied

    Hierarchy against history

    A breadcrumb built from the previous page showed a different path each visit for the same item. It cost more to maintain than the correct version and orientated nobody.

Local chart

CMP·020 · Region III · Grid E1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Visibility of System StatusHEUR·001 · PRINCIPLES BEHIND THISNavigationPAT·001 · OFTEN USED WITHMobile UX ChecklistCHK·003 · CHECK YOUR WORKWeb UX ChecklistCHK·011 · CHECK YOUR WORKStructured DataTERM·131 · SHORT DEFINITIONInformation ArchitectureRES·015 · RELATED CONCEPTSEO for Content ProductsWRT·007 · RELATED CONCEPT

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

Navigation

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.