Breadcrumbs are the component most often added because a page felt bare. They earn their place on exactly one kind of site - deep and hierarchical - and on every other kind they are a row of links nobody clicks, occupying the space directly above the thing the reader came for.
112 components on 21st carry the breadcrumb tag. The component takes an afternoon; knowing whether you need it takes a paragraph.
When they help
The hierarchy is real and more than two levels deep. Shop, category, subcategory, product. Docs, section, page. If your site is flat, a breadcrumb showing "Home / Pricing" is decoration.
People arrive from search, not from the top. This is the actual argument. Someone landing on a product page from a search result has no idea where they are in the structure, and a breadcrumb answers it in one line.
The parent is worth visiting. A breadcrumb is a promise that the level above is useful. If your category page is a redirect or a stub, do not advertise it.
The components
Breadcrumb by originui is the extended shadcn base, and Breadcrumb by preetsuthar17, Breadcrumb by coss.com, Interfaces Breadcrumb by jshguo and Breadcrumb by prebuiltui are the alternatives.
Smart Breadcrumb by Ruixen UI handles the case that actually needs a component: collapsing the middle when the trail is too long for the width.
The markup, which is short and specific
A breadcrumb is a navigation landmark containing an ordered list. That is the whole thing:
Three details. The aria-label matters when a page has more than one navigation landmark, which it always does. The current page carries aria-current="page" and is usually not a link. And the separator is decoration: draw it with CSS, or mark it aria-hidden, because a screen reader reading "slash" between every item is noise.
The schema, which is why this is worth doing properly
Breadcrumbs are one of the few components with a direct, visible payoff in search results. BreadcrumbList structured data is what replaces the raw URL under a result with a readable path, which changes how the result reads at a glance.
Three rules make it work. The marked-up trail must match the visible one exactly, item for item. The positions must be sequential from one. And it belongs on the page it describes, generated from the same data the visible breadcrumb uses, so the two cannot drift.
If the trail is generated from the URL path, watch the labels: "shop/chairs/eames-lounge-chair-1956" produces a readable path only if you map segments to real titles.
On a phone
A four-level trail does not fit a narrow screen, and there are two honest answers. Collapse the middle with an overflow control, which is what the smart variants do. Or show only the parent with a back arrow, which is the pattern most mobile apps use and which answers the reader's actual question - how do I go up one - without the full path.
What does not work is letting it wrap to two lines, which turns a wayfinding aid into a paragraph.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui Breadcrumb | The primitive with the semantics correct, including the ellipsis | No schema, no route integration |
| Your router | Generating the trail from the route tree | The labels still need mapping |
| Plain HTML | Genuinely enough: a nav, an ol, and a CSS separator | You write the collapse behaviour |
| 21st | Smart collapsing and styled variants | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a breadcrumb, get the previews inline, and let the agent write the file.
Browse breadcrumb components →
Frequently asked
- When are breadcrumbs worth adding?
- When the hierarchy is real and more than two levels deep, and when people arrive from search rather than from the top. Someone landing on a product page from a result has no idea where they are in the structure. On a flat site, Home / Pricing is decoration above the thing they came for.
- What markup should a breadcrumb use?
- A nav landmark with an aria-label, containing an ordered list of links, with aria-current="page" on the last item, which is usually not a link. Draw the separator in CSS or hide it from assistive technology, because a screen reader reading slash between every item is noise.
- Does breadcrumb schema do anything?
- Yes, and it is one of the few components with a visible payoff: BreadcrumbList structured data replaces the raw URL under a search result with a readable path. It has to match the visible trail item for item, use sequential positions from one, and be generated from the same data so the two cannot drift.
- How should breadcrumbs behave on mobile?
- Collapse the middle behind an overflow control, or show only the parent with a back arrow, which answers the reader's real question of how to go up one level. Letting the trail wrap to two lines turns a wayfinding aid into a paragraph.