Breadcrumb

Displays the path to the current page. Built on <nav> + <ol>.

Component Skill — components/breadcrumb/component-skill.md

Native basis

<nav> + <ol> for hierarchical path display.

Web Platform APIs

<nav> <ol> aria-current="page" :focus-visible prefers-reduced-motion prefers-contrast forced-colors

Classes

.breadcrumb-list .breadcrumb-item .breadcrumb-link .breadcrumb-separator .breadcrumb-page .breadcrumb-ellipsis

Default

Slash-separated navigation trail with links and a current page.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Home</a></li>
    <li class="breadcrumb-separator" aria-hidden="true">/</li>
    <li class="breadcrumb-item"><span class="breadcrumb-page" aria-current="page">Current</span></li>
  </ol>
</nav>

Custom separator

Chevron icon separators instead of slashes.

<li class="breadcrumb-separator" aria-hidden="true">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
    <path d="m9 18 6-6-6-6"/>
  </svg>
</li>

Collapsed

Long trails can collapse middle items into an ellipsis.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Home</a></li>
    <li class="breadcrumb-separator" aria-hidden="true">/</li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-ellipsis" aria-hidden="true">&#x22EF;</span>
    </li>
    <li class="breadcrumb-separator" aria-hidden="true">/</li>
    <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Components</a></li>
    <li class="breadcrumb-separator" aria-hidden="true">/</li>
    <li class="breadcrumb-item"><span class="breadcrumb-page" aria-current="page">Breadcrumb</span></li>
  </ol>
</nav>

CSS view file

Styles for the breadcrumb component. Uses design tokens for colors, spacing, and radius.

@layer components {
  .breadcrumb-list {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.375rem; list-style: none; margin: 0; padding: 0;
    font-size: 0.875rem;
  }
  .breadcrumb-item { display: inline-flex; align-items: center; gap: 0.375rem; }
  .breadcrumb-link {
    color: var(--muted-foreground); text-decoration: none;
    border-radius: var(--radius-sm); outline: none;
    transition: color 150ms ease;
    &:hover { color: var(--foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .breadcrumb-separator {
    color: var(--muted-foreground); font-size: 0.75rem;
    & svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

    /* RTL: auto-flip chevron separators */
    [dir="rtl"] & svg { scale: -1 1; }
  }
  .breadcrumb-page { color: var(--foreground); font-weight: 400; }
  .breadcrumb-ellipsis {
    display: flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; color: var(--muted-foreground);
    & span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .breadcrumb-link { transition: none; }
  }

  @media (prefers-contrast: more) {
    .breadcrumb-link { text-decoration: underline; }
    .breadcrumb-page { font-weight: 600; }
  }

  @media (forced-colors: active) {
    .breadcrumb-link {
      &:hover { forced-color-adjust: none; color: HighlightText; background: Highlight; }
    }
    .breadcrumb-page { color: CanvasText; }
    .breadcrumb-separator { color: GrayText; }
  }
}