Basic Breadcrumbs

Navigation path showing current location in hierarchy

<nav aria-label="Breadcrumb">
  <ol class="breadcrumbs" role="list">
    <li class="breadcrumbs__item">
      <a href="/" class="breadcrumbs__link">Home</a>
      <svg class="breadcrumbs__separator" viewBox="0 0 20 20" fill="none">
        <path d="M10.875 10L6.9375 6.0625L8 5L13 10L8 15L6.9375 13.9375L10.875 10Z"/>
      </svg>
    </li>
    <li class="breadcrumbs__item">
      <a href="/categories" class="breadcrumbs__link">Categories</a>
      <svg class="breadcrumbs__separator" viewBox="0 0 20 20" fill="none">
        <path d="M10.875 10L6.9375 6.0625L8 5L13 10L8 15L6.9375 13.9375L10.875 10Z"/>
      </svg>
    </li>
    <li class="breadcrumbs__item">
      <span class="breadcrumbs__link breadcrumbs__link--current" aria-current="page">
        CRM Software
      </span>
    </li>
  </ol>
</nav>

Two Levels

Shorter navigation path

Four Levels

Deeper navigation hierarchy

With SEO Schema Markup

Structured data for search engines (schema.org/BreadcrumbList)

<ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a href="/" itemprop="item">
      <span itemprop="name">Home</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  ...
</ol>

In Context

Breadcrumbs in page header

Usage Guidelines

• Current Page: Always show as non-clickable span with aria-current="page"
• Parent Links: All ancestors should be clickable links
• Separators: Use chevron-right icon between items (no separator after current page)
• SEO: Include schema.org markup for search engine indexing
• Placement: Typically placed at top of page, above main heading
• Length: Keep to 2-5 levels deep; consider truncation for very long paths

Accessibility Notes

• Semantic HTML: Use <nav> with aria-label="Breadcrumb"
• List Structure: Use <ol> with role="list" to preserve semantics
• Current Page: Mark with aria-current="page" and disable pointer events
• Focus States: All links have visible focus indicators
• Link Text: Use meaningful labels (not "Back" or "Previous")
• Landmarks: Breadcrumbs are a navigation landmark for screen readers

Design System Specs