Breadcrumb

Breadcrumb

Help users understand their current location

What it solves

Breadcrumbs display as horizontal link lists separated by symbols, helping users understand their website location at a glance. Breadcrumbs work as secondary navigation aids showing users their current location and providing easy navigation back through parent pages. Websites with deep hierarchical structures or complex navigation paths benefit most from breadcrumbs.

When to use

Use Breadcrumbs to show users their location within a website's structure and help easy navigation. Common scenarios include:

• Websites have multiple hierarchical levels (categories, sub-categories)
• Large or complex sites where users land on deep pages from search engines
• Systems rely on nested file or document organization (file explorers, project management tools)
• E-commerce stores use layered product categories

When to avoid

• Single-level websites have flat structure
• Landing pages or homepages don't need them
• Small websites use simple navigation
• Hierarchy already shows through other navigation elements
• Single-page applications use modal-based navigation

Implementation workflow

1. Confirm the pattern matches the problem and constraints before copying the example. 2. Start from the anatomy and examples in references/pattern.md, then choose the smallest viable variation. 3. Apply accessibility, performance, and interaction guardrails before layering visual polish. 4. Use the testing guidance to verify behavior across keyboard, screen reader, responsive, and failure scenarios.

Accessibility guardrails

Do's ✅

• Use <nav> with aria-label="Breadcrumb" for landmark navigation
• Mark current page with aria-current="page"
• Use ordered list <ol> to convey sequence
• Ensure keyboard navigation with visible focus indicators
• Provide skip links for lengthy breadcrumb trails
• Announce dynamic breadcrumb updates to screen readers

Don'ts ❌

• Don't make the current page title clickable
• Don't rely solely on visual separators (use CSS pseudo-elements)

Performance guardrails

Target performance metrics for breadcrumb navigation:

• Initial render: < 50ms for breadcrumb component
• Interaction delay: < 100ms for hover/focus states
• Layout shift: CLS score of 0 (no shift after initial render)
• Bundle size: < 5KB for breadcrumb component with styles
• Memory usage: < 1MB for complex breadcrumb trails

Optimization Strategies

[Lazy Loading](/glossary/lazy-loading) for Deep Hierarchies

// Load intermediate levels only when needed
const BreadcrumbTrail = ({ path }) => {
  const [expanded, setExpanded] = useState(false);
  if (path.length > 5 && !expanded) {
    return (
      <>
        {path[0]}
        <button onClick={() => setExpanded(true)}>...</button>
        {path[path.length - 1]}
      </>
    );
  }
  return path.map(item => );
};

Common mistakes

Making Current Page a Link

The Problem: The last breadcrumb item links to the current page, creating confusing circular navigation.

<!-- Bad -->
<a href="/current">Current Page</a>

<!-- Good -->
<span aria-current="page">Current Page</span>

How to Fix It: Use a non-clickable span with aria-current="page" for the current page instead of a link.

Using Breadcrumbs as Primary Navigation

The Problem: Relying on breadcrumbs instead of proper main navigation, leaving users without clear site structure.

How to Fix It: Always provide a main navigation menu. Breadcrumbs should supplement, not replace primary navigation.

Incorrect Hierarchy Representation

The Problem: Breadcrumb trail doesn't match actual site structure, misleading users about their location.

<!-- Bad: Skipping levels -->
Product Details

<!-- Good: Full path -->
Products > Electronics > Product Details

How to Fix It: Show the complete meaningful hierarchical path without skipping levels. Include Home only when it is an explicit breadcrumb item.

Related patterns

• https://uxpatterns.dev/patterns/navigation/back-to-top
• https://uxpatterns.dev/patterns/navigation/pagination
• https://uxpatterns.dev/patterns/navigation/tabs

---

For full implementation detail, examples, and testing notes, see references/pattern.md.

Pattern page: https://uxpatterns.dev/patterns/navigation/breadcrumb

Breadcrumb

Create effective breadcrumb navigation for better site orientation. Learn implementation techniques, accessibility requirements, and design best practices for clear hierarchical navigation.

URL: https://uxpatterns.dev/patterns/navigation/breadcrumb Source: apps/web/content/patterns/navigation/breadcrumb.mdx

---

Overview

Breadcrumbs display as horizontal link lists separated by symbols, helping users understand their website location at a glance.

Breadcrumbs work as secondary navigation aids showing users their current location and providing easy navigation back through parent pages.

Websites with deep hierarchical structures or complex navigation paths benefit most from breadcrumbs.

Use Cases

When to use:

Use Breadcrumbs to show users their location within a website's structure and help easy navigation.

Common scenarios include:

• Websites have multiple hierarchical levels (categories, sub-categories)
• Large or complex sites where users land on deep pages from search engines
• Systems rely on nested file or document organization (file explorers, project management tools)
• E-commerce stores use layered product categories

When not to use:

• Single-level websites have flat structure
• Landing pages or homepages don't need them
• Small websites use simple navigation
• Hierarchy already shows through other navigation elements
• Single-page applications use modal-based navigation

Common scenarios and examples

• E-commerce: Products > Electronics > Smartphones > iPhone 15
• Content Management: Dashboard > Projects > Project A > Documents
• File Systems: My Drive > Work > 2024 > Reports

Benefits

• Fewer actions needed to navigate up levels
• Users don't feel lost in complex hierarchies
• Better SEO through exposed site structure
• Lower bounce rates for deep-linked pages
• Clear contextual information about current location

Drawbacks

• Context may be redundant on very flat sites – On single‑level or shallow sites, breadcrumbs add little value; they're most useful when users land deep from external links and need quick context and upward navigation
• Takes up space – Redundant on small screens or without hierarchical navigation needs
• Responsive design complexity – Long trails need truncation or horizontal scrolling
• Structured data requirement – Correct implementation needed for SEO benefits (schema markup)
• Misuse in flat hierarchies – No benefit without clear depth-based navigation

Anatomy

flowchart TB
A[Optional Home] -.->|separator| B[Parent Page]
B -.->|separator| C[Current Page]

Component Structure

1. Container (`nav`)

• Wraps entire breadcrumb navigation
• Uses semantic navigation elements for accessibility
• Needs proper labeling for screen readers

2. List (`ol`)

• Holds breadcrumb items in sequential order
• Shows hierarchical structure of the page
• Usually an ordered list conveying structure

3. Items (`li`)

• Home Link (Optional): Starting point linking to homepage
• Parent Pages: Clickable links representing higher navigation levels
• Current Page: Final item that shouldn't be a link since it's the current view
• Separators: Visual dividers (/, >) showing clear navigation hierarchy

Summary of Components

Best Practices

Content

Do's ✅

• Use clear, concise labels that match page titles
• Maintain consistent naming conventions
• Show the full meaningful hierarchy path
• Treat the Home item as optional; include it only when the visible breadcrumb trail and structured data both include it

Don'ts ❌

• Don't use inconsistent terminology between breadcrumb items and page titles
• Don't truncate breadcrumb items without indicating there's more content

Accessibility

Do's ✅

• Use <nav> with aria-label="Breadcrumb" for landmark navigation
• Mark current page with aria-current="page"
• Use ordered list <ol> to convey sequence
• Ensure keyboard navigation with visible focus indicators
• Provide skip links for lengthy breadcrumb trails
• Announce dynamic breadcrumb updates to screen readers

Don'ts ❌

• Don't make the current page title clickable
• Don't rely solely on visual separators (use CSS pseudo-elements)
• Don't remove focus indicators without alternatives
• Don't use color alone to indicate current page

Visual Design

Do's ✅

• Make it obvious that the last item is not clickable (through color, cursor type, etc.)
• Use consistent visual styling across all pages
• Ensure sufficient contrast between text and background

Don'ts ❌

• Don't use distracting animations or transitions
• Don't make separators too prominent

Layout & Positioning

Do's ✅

• Place the breadcrumb at the top of the page, below the global navigation and above the page title
• Keep the breadcrumb left-aligned
• Consider showing both icon and text on larger screens
• When Home is part of the trail, consider showing a house icon instead of text "Home" on smaller screens

Don'ts ❌

• Do not show a breadcrumb if the navigation's hierarchy contains only one level (home page or landing pages for example)
• Do not use an HTML element for separators but prefer using CSS

Breadcrumb Variations

Location-Based Breadcrumbs

Shows the page's position within the site hierarchy, most common type.

Products > Electronics > Laptops > Gaming Laptops

Use when: Site has clear hierarchical structure with defined categories.

Path-Based Breadcrumbs

Shows the actual path the user took to reach the current page.

Search Results > Product Details > Reviews

Use when: Users follow varied paths and need to retrace their journey.

Attribute-Based Breadcrumbs

Displays attributes or filters applied to reach current view.

Products > Brand: Apple > Price: $500-$1000 > In Stock

Use when: E-commerce sites with faceted search and filtering.

Mobile Breadcrumbs

Collapsed or simplified versions for small screens.

← Electronics / Laptops

Use when: Mobile interfaces need space-efficient navigation.

Common Mistakes & Anti-Patterns 🚫

Making Current Page a Link

The Problem: The last breadcrumb item links to the current page, creating confusing circular navigation.

<!-- Bad -->
<a href="/current">Current Page</a>

<!-- Good -->
<span aria-current="page">Current Page</span>

How to Fix It: Use a non-clickable span with aria-current="page" for the current page instead of a link.

---

Using Breadcrumbs as Primary Navigation

The Problem: Relying on breadcrumbs instead of proper main navigation, leaving users without clear site structure.

How to Fix It: Always provide a main navigation menu. Breadcrumbs should supplement, not replace primary navigation.

---

Incorrect Hierarchy Representation

The Problem: Breadcrumb trail doesn't match actual site structure, misleading users about their location.

<!-- Bad: Skipping levels -->
Product Details

<!-- Good: Full path -->
Products > Electronics > Product Details

How to Fix It: Show the complete meaningful hierarchical path without skipping levels. Include Home only when it is an explicit breadcrumb item.

---

Poor Mobile Handling

The Problem: Full breadcrumb trail causes horizontal scroll on mobile, reducing usability.

/* Bad */
.breadcrumb { white-space: nowrap; }

/* Good: Progressive disclosure */
@media (max-width: 768px) {
  .breadcrumb-item:not(:last-child):not(:first-child) {
    display: none;
  }
}

How to Fix It: Use progressive disclosure or collapsed breadcrumbs on mobile to show only essential levels.

Missing Semantic Markup

The Problem: Using generic divs without proper ARIA labels breaks screen reader navigation.

<!-- Bad -->
<div class="breadcrumb">...</div>

<!-- Good -->
<nav aria-label="Breadcrumb">
  <ol>...</ol>
</nav>

How to Fix It: Use semantic HTML with <nav> and <ol> elements, plus proper ARIA labels for accessibility.

Tracking

Tracking breadcrumb interactions helps measure how users navigate through a site, whether they rely on breadcrumbs for backtracking, and if they help reduce friction in multi-level navigation. By analyzing usage patterns, we can optimize the breadcrumb structure and placement.

Key Tracking Points

Each breadcrumb interaction provides valuable insights into user behavior. Below are the key events that should be tracked:

Event Payload Structure

To ensure consistent tracking, here’s a recommended event format:

{
  "event": "breadcrumb.click",
  "properties": {
    "breadcrumb_id": "product_category",
    "clicked_level": "Electronics",
    "breadcrumb_position": 2,
    "total_levels": 4
  }
}

Key Metrics to Analyze

Once tracking is in place, the following metrics provide actionable insights:

• Breadcrumb Usage Rate → Percentage of page visits where breadcrumbs were interacted with.
• Breadcrumb Click-Through Rate (CTR) → Percentage of users who interact with breadcrumbs after seeing them.
• Navigation Recovery Rate → How often users navigate up using breadcrumbs instead of the browser back button.
• Home Click Rate → Optional metric for trails that include a Home item.
• Intermediate Level Click Rate → Tracks how often users use breadcrumbs to navigate back to higher levels.

Insights & Optimization Based on Tracking

By analyzing tracking data, we can optimize breadcrumb usability:

• 🚨 Low Breadcrumb Usage Rate?

→ Users may not notice breadcrumbs or find them unnecessary. Optimization: Improve visibility, adjust styling for better contrast, or test a more prominent placement.

• ⏳ Low Breadcrumb Click-Through Rate?

→ Users see breadcrumbs but don’t interact with them. Optimization: Consider whether breadcrumbs are necessary in the current navigation structure. They may be redundant if other navigation methods are more intuitive.

• 🔄 Frequent Home Clicks?

→ If the trail includes Home, users might be struggling to find their way back through intermediate levels. Optimization: Review site structure and ensure proper linking between categories.

• 🔁 More Back Button Usage Than Breadcrumb Clicks?

→ Users might prefer using browser navigation instead of breadcrumbs. Optimization: Make breadcrumbs more interactive and clearly indicate their functionality.

• 📉 Low Intermediate Level Click Rate?

→ Users are not navigating up through breadcrumbs. Optimization: Ensure breadcrumbs are relevant for deep hierarchies and not just duplicating the main navigation.

By continuously monitoring these metrics, we can refine breadcrumb effectiveness, ensuring they support seamless navigation and reduce friction in user journeys.

Performance Metrics

Target performance metrics for breadcrumb navigation:

• Initial render: < 50ms for breadcrumb component
• Interaction delay: < 100ms for hover/focus states
• Layout shift: CLS score of 0 (no shift after initial render)
• Bundle size: < 5KB for breadcrumb component with styles
• Memory usage: < 1MB for complex breadcrumb trails

Optimization Strategies

[Lazy Loading](/glossary/lazy-loading) for Deep Hierarchies

// Load intermediate levels only when needed
const BreadcrumbTrail = ({ path }) => {
  const [expanded, setExpanded] = useState(false);

  if (path.length > 5 && !expanded) {
    return (
      <>
        {path[0]}
        <button onClick={() => setExpanded(true)}>...</button>
        {path[path.length - 1]}
      </>
    );
  }
  return path.map(item => );
};

CSS-Only Separators

/* Avoid DOM elements for separators */
.breadcrumb-item:not(:last-child)::after {
  content: "›";
  margin: 0 0.5rem;
}

Usability Testing Insights

Research shows that users:

• Understand breadcrumb purpose immediately when properly styled (87% of users)
• Use breadcrumbs for upward navigation (52% of users)
• Click middle hierarchy levels more than home (68% of clicks)
• Have 23% lower engagement on mobile due to space constraints
• Prefer ">" separator over other symbols (72% preference)

Testing Recommendations

A/B Test Variables:

• Separator symbols (>, /, →, |)
• Truncation methods (ellipsis, collapsing, scrolling)
• Current page inclusion/exclusion
• Mobile presentation styles

Localization

Text Expansion Considerations

Breadcrumb text can expand 30-200% when translated:

/* Allow for text expansion */
.breadcrumb {
  min-width: 0;
  flex-wrap: wrap;
}

.breadcrumb-item {
  min-width: 0;
  overflow-wrap: break-word;
}

RTL (Right-to-Left) Support

/* Automatic RTL flipping */
.breadcrumb {
  display: flex;
  flex-direction: row;
}

/* Flip separator in RTL */
[dir="rtl"] .breadcrumb-item:not(:last-child)::after {
  content: "‹";
}

Cultural Considerations

• Home Label: When used, "Home" does not translate literally in all languages
• Separator Symbols: Avoid culturally specific symbols
• Truncation: Consider character-based vs word-based truncation
• Reading Direction: Some cultures read hierarchy differently

Code Examples

Basic Implementation

This example uses semantic HTML to provide a clear structure for the breadcrumb navigation.

<nav aria-label="Breadcrumb">
  <ol>
    <li>
      <a href="https://example.com/products">
        <span>Products</span>
      </a>
    </li>

    <li>
      <span aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

JSON-LD Structured Data

This example demonstrates how to dynamically generate breadcrumb JSON-LD structured data from the same trail shown to users.

const breadcrumbs = [
  { title: "Products", url: "https://example.com/products" },
  { title: "Current Page" },
];

function generateBreadcrumbSchema(breadcrumbs) {
  return {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: breadcrumbs.map((crumb, index) => {
      const isLastItem = index === breadcrumbs.length - 1;

      const baseItem = {
        "@type": "ListItem",
        position: index + 1,
        name: crumb.title,
      };

      // Only add the "item" property if it's not the last item and has a URL
      if (!isLastItem && crumb.url) {
        baseItem.item = crumb.url;
      }

      return baseItem;
    }),
  };
}

SEO

Structured Data

• Implement breadcrumb structured data using Schema.org markup to help search engines understand your site's hierarchy
• Generate BreadcrumbList from the same source of truth as the visible breadcrumb trail
• Omit breadcrumb structured data when there is no visible, meaningful trail or the trail has only one item
• This improves the way your site appears in search results and helps search engines better understand your content structure

Example JSON-LD structured data:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Products",
      "item": "https://example.com/products"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Current Page"
    }
  ]
}

Testing & Validation

• Use Google's Rich Results Test to validate structured data
• Monitor breadcrumb appearance in search results through Google Search Console
• Check for proper indexing of breadcrumb pages in site architecture
• Verify mobile rendering of breadcrumbs for mobile-first indexing

Testing Guidelines

Functional Testing

Should ✓

• [ ] Navigate to the correct page when clicking each breadcrumb link
• [ ] Show the complete hierarchy path from the first meaningful parent, or from Home when Home is part of the trail, to the current page
• [ ] Update breadcrumb trail when navigating through different levels
• [ ] Maintain state after page refresh
• [ ] Work with browser back/forward navigation

Accessibility Testing

Should ✓

• [ ] Be navigable using keyboard (Tab and Enter keys)
• [ ] Have proper ARIA labels and roles
• [ ] Announce proper hierarchy to screen readers
• [ ] Maintain focus state visibility
• [ ] Have sufficient color contrast (WCAG 2.2 AA)

Responsive Testing

Should ✓

• [ ] Adapt layout for different screen sizes
• [ ] Handle optional home labels or icons appropriately
• [ ] Handle text overflow gracefully
• [ ] Maintain touch target sizes on mobile (minimum 44x44px)
• [ ] Preserve functionality across different devices

SEO Testing

Should ✓

• [ ] Include proper Schema.org markup when a meaningful breadcrumb trail exists
• [ ] Have semantic HTML structure
• [ ] Maintain consistent URL structure
• [ ] Include relevant meta tags
• [ ] Follow proper link hierarchy

Performance Testing

Should ✓

• [ ] Load without significant delay
• [ ] Not cause layout shifts
• [ ] Handle large numbers of items efficiently
• [ ] Work with dynamic content updates
• [ ] Function without JavaScript (progressive enhancement)

Design Tokens (DTF)

These design tokens follow the Design Tokens Format specification and can be used with various token transformation tools to generate platform-specific variables.

{
  "breadcrumb": {
    "container": {
      "paddingY": "{spacing.3}",
      "paddingX": "{spacing.0}",
      "fontSize": "{fontSize.sm}",
      "background": "{colors.transparent}"
    },
    "item": {
      "color": "{colors.gray.600}",
      "colorHover": "{colors.gray.900}",
      "marginRight": "{spacing.2}",
      "fontSize": "{fontSize.sm}"
    },
    "separator": {
      "color": "{colors.gray.400}",
      "marginX": "{spacing.2}"
    },
    "current": {
      "color": "{colors.gray.900}",
      "fontWeight": "{fontWeight.medium}"
    },
    "link": {
      "color": "{colors.gray.600}",
      "colorHover": "{colors.gray.900}",
      "textDecoration": "{textDecoration.none}",
      "transition": "{transition.colors}",
      "focusOutline": "2px solid {colors.blue.500}"
    }
  }
}

Frequently Asked Questions

' or '/'\n" + "3. Ensure all items, except the current page, are clickable links\n" + "4. Be concise and not occupy excessive space\n" + "5. Be placed near the top of the page, below the main navigation", }, { question: "What are the benefits of using breadcrumbs?", answer: "Breadcrumbs enhance user experience by:\n\n" + "1. Providing a clear path back to higher-level pages\n" + "2. Reducing the number of actions needed to navigate to previous pages\n" + "3. Offering context about the site's structure\n" + "4. Potentially improving SEO by providing internal links with relevant anchor text", }, { question: "What are common mistakes to avoid with breadcrumb navigation?", answer: "Avoid these common mistakes:\n\n" + "1. Making the breadcrumb trail too prominent, overshadowing primary navigation\n" + "2. Omitting the current page from the breadcrumb trail\n" + "3. Using inconsistent or unclear separators\n" + "4. Not providing enough space between links, making them hard to click, especially on mobile devices", }, ]} />

Related Patterns

Resources

References

• WCAG 2.2 - Accessibility baseline for keyboard support, focus management, and readable state changes.
• MDN anchor element - Native link semantics, navigation behavior, and accessible labeling.

Guides

• WAI Cognitive Pattern: Make Each Step Clear - Recommendations for orientation, progress, and re-entry in staged task flows.

Articles

• Nielsen Norman Group: Breadcrumbs - Best practices for hierarchy cues, current-page indication, and truncation.

NPM Packages

• `next` - Routing, image, and navigation primitives commonly used in app shell and commerce UIs.
• `react-router-dom` - Client-side route primitives useful for links, breadcrumbs, and tab navigation.
• `@tanstack/react-router` - Typed route primitives for navigation-heavy interfaces.