Breadcrumbs | LlamaPress Pattern Catalog
LlamaPress
Sign in Upload
Orient
Pattern

Breadcrumbs

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.

Orient Find & Navigate

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.

Live demo — try it Open full screen
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.

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.

Instead of this, consider

Same problem, different trade-off. Pick on the condition, not on taste.

Persistent Navigation
When: You need "where can I go" rather than "what contains this".
Back Link
When: There is exactly one place to return to and no hierarchy above it.

Ask Leo for this

Paste this into your Leo chat. It describes the behaviour, not the code, so Leo can fit it to your data.

Prompt 
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

Pattern
Orientation
The principle — where am I, how did I get here, where can I go next.