Breadcrumbs

Breadcrumbs display hierarchical path from root to current page, enabling quick navigation to parent levels.

stellae.design

Design Principles

Secondary navigation showing the path: Home > Category > Subcategory > Current Page. Answers 'Where am I?' and provides one-click parent access. Essential for deep hierarchies (e-commerce, docs, file systems). Types: hierarchy-based, path-based, attribute-based.

Why It Matters

Breadcrumbs are a secondary navigation pattern that displays the user's current location within a site's hierarchy as a trail of clickable links — typically Home > Category > Subcategory > Current Page — allowing users to orient themselves and jump to higher-level sections without relying on the browser's back button. They are one of the most cost-effective usability improvements available: small in visual footprint, simple to implement, and consistently shown in research to reduce disorientation, lower navigation time, and decrease bounce rates on content-heavy and e-commerce sites. Despite their simplicity, breadcrumbs solve a fundamental wayfinding problem that affects every user who arrives at an interior page via search, a shared link, or a deep notification — which, on most sites, is the majority of visits.

Real-World Examples

Amazon's product category breadcrumbs

Amazon displays hierarchical breadcrumbs on every product page showing the path from the department through nested categories to the current product listing, allowing users to explore related items by jumping to any level of the taxonomy. The breadcrumbs use the product's primary category path even when the user arrived via search, providing consistent orientation regardless of entry point. This pattern is especially valuable on a site with millions of products where users frequently need to understand what category they are browsing and how to find similar items.

GOV.UK's hierarchical navigation trail

GOV.UK uses breadcrumbs as a primary orientation mechanism across its vast information architecture, showing users exactly where they are within the government service hierarchy with clear, jargon-free labels at each level. The breadcrumbs are especially critical because most users arrive at interior pages directly from search engines rather than navigating from the homepage, meaning the breadcrumb trail is often their first indication of organizational context. The implementation includes proper Schema.org markup and ARIA labels, making it equally functional for screen reader users and search engine crawlers.

Counter-example

Single-page app with no location indicators

A project management SPA uses client-side routing to navigate between projects, boards, tasks, and settings, but provides no breadcrumbs or location indicators beyond the URL bar, which displays opaque hash fragments like '#/p/a3f2/b/9c1e/t/7d4a'. Users who open a task from a notification have no way to determine which project or board it belongs to without clicking back repeatedly, and shared links provide zero context about where the linked content lives within the application's hierarchy. Adding a simple breadcrumb trail — Workspace > Project > Board > Task — would instantly solve the orientation problem that users currently work around through trial and error.

Role-Specific Guidance

Common Mistakes

• The most common mistake is omitting breadcrumbs from mobile layouts to save space, which is exactly where they are most needed — mobile users have smaller viewports, no hover tooltips, and less visible URL context, making orientation aids more critical, not less. Another frequent error is building breadcrumbs that reflect the user's click history rather than the content hierarchy, producing confusing trails like Home > Search Results > Category > Product > Category > Different Product that grow longer with each navigation action. Teams also implement breadcrumbs without structured data markup, missing the significant SEO benefit of breadcrumb-enhanced search result snippets that improve click-through rates by helping users assess relevance before visiting the page.