# Breadcrumbs

Show the path from home to here, and let people click any step.

- Family: Navigation
- Kind: Classic pattern
- Maturity: established
- Platforms: web, desktop
- Updated: 2026-10-12
- Source: https://uxpatterns.ai/patterns/breadcrumbs
- Licence: CC BY 4.0 (text and drawings; product screenshots excluded)

## Problem

People land deep inside a large site - from search, a shared link or an ad - and do not know where they are in the structure. They want to see the bigger section, or go 2 levels up, without pressing Back 5 times or starting again from the home page.

## Forces

- Orientation - "where am I?"
- Fast escape upwards
- Little screen space

## Solution

Place a single row of links near the top of the page that mirrors the site hierarchy: Home › Section › Sub-section › Current page. Every step except the current one is a link. The current page is plain text. Keep the row small and in the same place on every page, and never make it the only navigation.

## Anatomy

- **Home link** (A): always first, even if the logo also goes home.
- **Separator** (B): a chevron or slash, never a link, with 8 to 12 px on each side.
- **Parent links** (C): 1 per level, in the site's link style, truncate long names with an ellipsis.
- **Current page** (D): plain text, marked aria-current="page", never a link to itself.

## Why it works

People find it easier to recognise where they are than to remember how they got there. A breadcrumb turns the invisible site structure into something you can see and point at, which lowers the mental load of navigation. Because it is small and always in the same place, it costs almost nothing when it is not needed.

## Use when

- The site has 3 or more levels of hierarchy.
- People arrive deep inside from search or shared links.
- Content lives in 1 clear place in the tree.

## Avoid when

- The site is flat - 1 or 2 levels. The row adds noise, not help.
- A single-task app or a checkout flow. Use a step indicator instead.
- Content belongs to many parents - the trail would lie.

## Risks

- Using it as the only navigation - it cannot move sideways.
- Mixing history and hierarchy in 1 row.
- Tiny text and separators that are hard to tap on a phone.

## Accessibility

- Wrap it in nav aria-label="Breadcrumb" with an ordered list inside.
- Separators are decoration - hide them from screen readers.
- Keep 44 px tap targets on touch screens, even if the text is 14 px.

## Examples

- **Microsoft Learn** (Microsoft, Oct 2026): 3 levels - Learn › Azure › Storage - above the article title. The current page is left out of the trail; the title already names it.
- **GOV.UK** (Government Digital Service, Oct 2026): Home › Driving and transport above the page title, marked up as nav aria-label="Breadcrumb" around an ordered list - the markup recommended below.

## Related patterns

- Main navigation (combined): /patterns/main-navigation
- Tabs (alternative): /patterns/tabs
- Wizard (conflicts): /patterns/wizard
- Faceted navigation (see-also): /patterns/faceted-navigation

## References

- van Welie, M. - Breadcrumbs, Patterns in Interaction Design (2001)
- Tidwell, J., Brewer, C., Valencia, A. - Designing Interfaces, 3rd ed. (2019)
- Nielsen Norman Group - Breadcrumbs: 11 design guidelines (2018, updated 2024)