---
title: Breadcrumbs
slug: breadcrumbs
kind: pattern
summary: A trail showing where the current screen sits in the hierarchy, with every ancestor clickable — the answer to "how did I get here" that survives a deep link.
problem: >-
  Someone opens a record from a link, a search result or a bookmark. They can
  see the record but not what contains it, so they cannot get to the sibling
  they actually wanted, and the browser Back button leads somewhere unrelated.
family: [orient, find]
data_shape: [record, hierarchy]
principles: [orientation]
interaction: [navigation]
density: low
complexity: low
status: stable
visibility: public
use_when:
  - The data is genuinely hierarchical — project contains milestone contains task.
  - People arrive at inner pages directly, not only by drilling down.
  - Moving up a level is a real thing people want to do.
avoid_when:
  - The structure is flat. A breadcrumb of one item is decoration.
  - The trail would just repeat the navigation bar's current item.
  - The path is a filter or a search, not a containment. That is a back link, not a breadcrumb.
alternatives:
  - slug: persistent-navigation
    when: You need "where can I go" rather than "what contains this".
  - slug: back-link
    when: There is exactly one place to return to and no hierarchy above it.
ask_leo: |
  Add breadcrumbs to the record pages in this hierarchy.

  - Show the containment path from the root to the current record, with a clear
    separator between levels.
  - Every ancestor is a link. The current item is the last crumb and is NOT a
    link — it is where you are.
  - Build the trail from the record's actual parents, not from the browser
    history. A breadcrumb must be identical whether the person drilled down or
    opened a bookmark.
  - Use the names people say out loud, not ids.
  - If a level's name is long, truncate the middle of that crumb rather than
    wrapping the trail onto a second line.
  - On a narrow screen, collapse the middle levels to a single overflow crumb
    but always keep the root and the immediate parent visible.
related:
  - title: Orientation
    url: /patterns/orientation
    summary: The principle — where am I, how did I get here, where can I go next.
---

## Anatomy

```
Projects  ›  Riverside Fit-Out  ›  Phase 2 — Framing  ›  Task 118
────────     ─────────────────     ──────────────────     ────────
 link            link                    link             current,
                                                          not a link
```

The rules that make it work rather than decorate:

- **It reflects containment, not history.** History is per-visit and cannot be
  linked to; containment is a property of the record and is the same for
  everyone. A "breadcrumb" built from where the user came from is a back
  button wearing a costume.
- **The last crumb is not a link.** A link to the page you are on teaches people
  the trail is unreliable.
- **Ancestors are real targets.** The value is jumping two levels up in one
  click — that is the whole point.

## Why it works

It answers *how did I get here* for someone who did not get here any particular
way. That is the case a navigation bar cannot serve: nav tells you the sections
of the product, breadcrumbs tell you where this specific record lives inside one.

It also converts the most common recovery action — "I want the sibling of this
thing" — from a navigate-search-filter sequence into one click on the parent.

## Getting it wrong

- **A trail that is really a back button.** Different for each visitor, wrong
  after a bookmark.
- **Ids instead of names.** `Projects › 4471 › 88 › 118` orients nobody.
- **Wrapping to two lines** on long names, which makes the trail louder than the
  page title beneath it.
- **Breadcrumbs on a flat app**, where every trail is `Home › Thing` and the
  pattern is pure ceremony.

## Exemplars

**GitHub** puts the trail in the page header for files —
`org / repo / src / models / user.rb` — and every segment is a real, useful
destination. It is the clearest demonstration that a breadcrumb's value is
proportional to how much you want to visit the ancestors.

**Google Drive** shows the same trail doing double duty as the drop target for
moving a file up a level, which is what happens when a breadcrumb is genuinely
the structure rather than a label of it.

The extractable rule: **a breadcrumb is only worth its space if the ancestors
are places worth going.** If nobody ever clicks the middle crumb, the hierarchy
it displays is not the hierarchy people think in.