How many crumbs should show?

Every ancestor back to a sensible root, usually Home or the product name, unless the trail is too long for the header. Past about four items on a phone, collapse the middle behind an ellipsis menu that lists the hidden segments.

Should the current page be a link?

No. The last crumb is the page you are on. Mark it with aria-current="page" and paint it as text, not a link. A link that reloads the same page adds a tab stop with no destination.

What separator should crumbs use?

A chevron or slash is convention. Pick one and keep it. The separator is decorative, so hide it from screen readers with aria-hidden or role="presentation".

Breadcrumb or back button?

A back button goes one step in browser history, which may cross sites or skip levels. A breadcrumb always reflects the site hierarchy. On mobile, many apps show both: back for history, breadcrumb for context when there is room.

Do breadcrumbs need to match the URL?

They should match the mental model people have of the structure. If the URL says /finance/invoices/ but the trail says Billing, pick the word people use in the product and keep it consistent in navigation and links.

Where does the breadcrumb sit?

Under the global header, above the page title. Stripe and most admin panels put it in that band so it is visible without competing with primary actions on the right.

Breadcrumb

A breadcrumb shows where you are inside a hierarchy, with links back to each ancestor. It answers which folder you are in, not which panel is open.

Structure and navigationBuild difficulty: Easy<nav aria-label="Breadcrumb">

Also called Breadcrumb trail, Path navigation, Hierarchy links.

INV-1042

Line items, payment history and send reminders.

Switch the trail below: the breadcrumb rebuilds and the current page is the last item, not a link. Tab through the earlier crumbs; the current page is plain text.

For designers

A breadcrumb answers where am I in the tree without opening anything. That matters when someone arrives on a deep page from a link and needs to climb to a parent list, or when two sections share a name and the trail disambiguates them.

The cost is honesty about hierarchy. If the product structure is flat, a breadcrumb with one crumb looks unfinished. If folders change often, stale trails erode trust faster than no trail at all.

Linear still shows a trail on issue pages because the issue sits inside a team and a project. The trail is short, two or three items, and every segment is a link someone might need. That is the sweet spot: enough depth to orient, not so much that the header becomes a paragraph.

Use a breadcrumb when

Pages nest inside folders, departments or categories that people recognise
Someone may land deep in the site from search or a shared link and needs a way up
The hierarchy is stable enough that the trail rarely lies about where you are

Reach for something else when

The sections are peers on one page and switching does not change the URL. Use tabs instead.
The app has one flat list of destinations with no nesting. Use a sidebar instead.
People move between sections all day and the trail would repeat on every screen. Use a menu instead.

Variants

Full

Collapsed

Short

Full trail, a collapsed middle with an ellipsis, and a short two-step path. The current page is always the last crumb.

Full. Every ancestor visible. Works on wide headers with short labels.

Collapsed. Home, ellipsis, current page when the middle is too long for the row. The ellipsis opens a menu of the hidden segments.

Short. Two crumbs when only one level sits above the page, like Settings and Team.

Wrap the trail in a nav with an accessible name, then an ordered list of items. Links for ancestors, plain text for the current page.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/finance/">Finance</a></li>
    <li><a href="/finance/invoices/">Invoices</a></li>
    <li><span aria-current="page">INV-1042</span></li>
  </ol>
</nav>

Tab moves through each link in order. The current page is not in the tab order because it is not a link. Separators between items are decorative: mark them aria-hidden so assistive tech does not announce "slash slash slash".

Keep labels short. A crumb that truncates loses the wayfinding value. If a title is long, shorten it in the trail and keep the full string in the page heading below.

On narrow screens, a trail that wraps to two lines competes with the page title. Collapse early. iOS Settings rarely shows more than back plus the current screen name because width is scarce. Desktop admin tools can afford the full chain.

The ellipsis control in a collapsed trail should open a menu of hidden segments, not a dead icon. Each hidden segment links to its ancestor page, same as the visible crumbs would.

Edge cases

Single crumb. Skip the breadcrumb. A trail of one item is a label wearing navigation clothes.

Dynamic middle segments. When folders are user-created, generate crumbs from the path at load time and update them when someone renames a folder.

Mobile width. Collapse before the trail wraps to two lines. A wrapped breadcrumb reads as broken layout rather than helpful context.

Shared links. When someone shares a deep URL, the breadcrumb on the landing page should match the path they clicked. A trail that resets to Home while the URL still says /finance/invoices/ breaks trust immediately.

Common questions

How many crumbs should show?: Every ancestor back to a sensible root, usually Home or the product name, unless the trail is too long for the header. Past about four items on a phone, collapse the middle behind an ellipsis menu that lists the hidden segments.
Should the current page be a link?: No. The last crumb is the page you are on. Mark it with aria-current="page" and paint it as text, not a link. A link that reloads the same page adds a tab stop with no destination.
What separator should crumbs use?: A chevron or slash is convention. Pick one and keep it. The separator is decorative, so hide it from screen readers with aria-hidden or role="presentation".
Breadcrumb or back button?: A back button goes one step in browser history, which may cross sites or skip levels. A breadcrumb always reflects the site hierarchy. On mobile, many apps show both: back for history, breadcrumb for context when there is room.
Do breadcrumbs need to match the URL?: They should match the mental model people have of the structure. If the URL says /finance/invoices/ but the trail says Billing, pick the word people use in the product and keep it consistent in navigation and links.
Where does the breadcrumb sit?: Under the global header, above the page title. Stripe and most admin panels put it in that band so it is visible without competing with primary actions on the right.

Last reviewed 26 AUG 2026