Breadcrumbs

Breadcrumbs are a navigational aid that displays the user’s current position within a site’s structure as a horizontal trail of links. They typically appear near the top of a page, reading left to right from the broadest level to the most specific — for example: Home > Products > Shoes > Running Shoes. Each level is a clickable link, allowing users to jump back to any parent level instantly.

The name comes from the Hansel and Gretel fairy tale — a trail left behind so you can find your way back. In digital interfaces, they serve exactly the same purpose. Breadcrumbs answer the question “Where am I?” and provide a quick escape route without requiring the user to rely on the browser’s back button or hunt through the main navigation.

There are three types. Location-based breadcrumbs show where the current page sits in the site’s hierarchy — these are the most common. Path-based breadcrumbs show the actual route the user took to arrive at the current page (less common and less useful, since paths vary). Attribute-based breadcrumbs show the characteristics of the current page, often used in e-commerce filtering (e.g., Men’s > Size 10 > Under £50).

Breadcrumbs are a secondary navigation element — they supplement the primary navigation, never replace it. They work best on sites with clear hierarchical information architecture, typically three or more levels deep.

Why it matters

Breadcrumbs reduce disorientation. When users land on a deep page via search (which is how most organic traffic arrives), they have no context about where that page sits in the broader site. Breadcrumbs immediately provide that context and offer clear paths to related content higher in the hierarchy.

From an SEO perspective, breadcrumbs are valuable too. Search engines use them to understand site structure, and Google often displays breadcrumb trails directly in search results, improving click-through rates. Implementing breadcrumbs with structured data (schema.org markup) amplifies this benefit.

In practice

• An e-commerce site with 10,000+ products found that pages with breadcrumbs had 25% lower bounce rates than pages without them. Users landing from Google search used the breadcrumbs to explore related categories rather than leaving.

• A government services website added breadcrumbs when usability testing showed that citizens frequently got lost in the multi-level service hierarchy. The breadcrumbs were especially helpful for older users who were less comfortable using the browser’s back button.

• A documentation site used breadcrumbs alongside a sidebar navigation. During a wireframe review, the team initially considered them redundant, but analytics later showed that 30% of page-to-page navigation happened through the breadcrumb trail — users preferred the quick hierarchical jumps.