Breadcrumb Navigation

Breadcrumb navigation is a secondary navigation system that shows users their current location within a website's hierarchy, typically displayed as a horizontal trail of clickable links separated by separators like "Home / Services / Web Design".

Category: General (also: Front End, Design, UX)

Author: Atomic Glue Technical Team

## Definition

Breadcrumb navigation is a UX pattern that displays the user's current location within a website's hierarchical structure. It appears as a horizontal list of links, typically near the top of a page, separated by a character like > (greater-than), / (slash), or an arrow icon. Each link represents a level in the site hierarchy, with the current page as the final, unlinked item. Breadcrumbs improve navigation efficiency, reduce bounce rates, and provide context even if a user arrives on an interior page from a search engine. The term comes from the Hansel and Gretel fairy tale, where breadcrumbs were used to mark a path back home.

## Types of Breadcrumbs

There are three main types: * **Hierarchical (Location-Based):** Shows where the page sits in the site structure. Example: Home > Products > Laptops > Ultrabooks. * **Attribute-Based:** Shows the categories or attributes a product belongs to. Common on e-commerce sites. Example: Home > Clothing > Men > Shirts > Size M. * **History-Based (Path):** Shows the user's path through the site, not the site structure. Example: Home > Search Results > Product Page. This type is less common and can confuse users who rely on the back button.

## UX and SEO Benefits

For UX, breadcrumbs reduce the number of clicks needed to navigate to higher-level pages, reduce bounce rates by giving users context and an easy way to explore related content, and help orient users who land on deep-linked pages from search engines. For SEO, breadcrumbs provide internal linking structure that search engines use to understand site hierarchy. Google often displays breadcrumb trails in search snippets (rich results), which can improve click-through rates. Implementing structured data (Schema.org BreadcrumbList) enables these rich results.

## Implementation Best Practices

Use breadcrumbs on sites with a clear hierarchy of 3+ levels. Always place the current page as unlinked text at the end. Use a consistent separator (like > or /). Add Schema.org BreadcrumbList structured data for rich search snippets. On mobile, keep breadcrumbs compact but readable. Do not use breadcrumbs as a primary navigation replacement; they are a supplementary tool. Avoid breadcrumbs on single-level sites where they add no value.

## In code

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li aria-current="page">Web Development</li>
  </ol>
</nav>

<!-- Schema.org structured data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "Home", "item": "https://atomicglue.com"},
    {"@type": "ListItem", "position": 2, "name": "Services", "item": "https://atomicglue.com/services"},
    {"@type": "ListItem", "position": 3, "name": "Web Development"}
  ]
}
</script>

## Common questions

Q: When should I not use breadcrumbs?

A: Avoid breadcrumbs on single-level sites, apps with non-linear navigation, or pages that serve as the top of a hierarchy.

Q: Do breadcrumbs help with Google rankings?

A: They are not a direct ranking factor, but Google displays breadcrumbs in search snippets (rich results), which can improve click-through rates.

Q: Should breadcrumbs replace the main navigation?

A: No. Breadcrumbs are a supplementary navigation aid, not a replacement for the primary navigation menu.

## Key takeaways

• Breadcrumbs show users where they are in your site hierarchy and provide quick back-navigation.
• Three types exist: location-based, attribute-based, and history-based. Location-based is most common.
• Breadcrumbs improve UX for deep sites and can boost SEO through rich search snippets.
• Implement with Schema.org structured data and always use the current page as unlinked text.

## Related entries

• [Hamburger Menu](atomicglue.co/glossary/hamburger-menu)
• [Accordion](atomicglue.co/glossary/accordion)

Last updated July 2025. Permalink: atomicglue.co/glossary/breadcrumb-navigation