Breadcrumbs

Basic usage

A breadcrumb trail shows the path from the root to the current page. On mobile (sm breakpoint), only the last link with a back chevron is shown.

Autosmmdlgxl

volvocars.com

Show codeHide code

<nav aria-label="breadcrumb" class="container-xl">
  <ol class="flex gap-8 py-8">
    <li class="until-md:hidden">
      <a href="#" class="link-plain md:text-secondary">Home</a>
      <span class="until-md:hidden ml-8 text-secondary" role="presentation">
        /
      </span>
    </li>
    <li class="until-md:hidden">
      <a href="#" class="link-plain md:text-secondary">Cars</a>
      <span class="until-md:hidden ml-8 text-secondary" role="presentation">
        /
      </span>
    </li>
    <li>
      <a href="#" class="link-plain md:text-secondary">
        <span class="inline flex items-center h-1lh mr-4 md:hidden">
          <img
            class="icon-sprite"
            width="12"
            height="12"
            role="presentation"
            aria-hidden="true"
            loading="lazy"
            alt=""
            src="https://www.volvocars.com/static/shared/icons/v5/chevron-back-16.svg"
          />
        </span>
        XC90
      </a>
      <span class="until-md:hidden ml-8 text-secondary" role="presentation">
        /
      </span>
    </li>
    <li class="until-md:hidden">
      <span role="link" aria-disabled="true" aria-current="page" tabindex="0">
        Features
      </span>
    </li>
  </ol>
</nav>

Responsive behavior

Breakpoint	Display
sm	Last trail link only, with back chevron icon
md, lg, xl	Full trail with separators, up to 5 pages

Use until-md:hidden to hide elements on small screens and md:hidden to hide the chevron on larger screens.

Placement

Position breadcrumbs left-aligned, directly above the page title or main content. This is the preferred placement. Breadcrumbs can also appear at the bottom of the page, after the content and above the footer, as a supplement to the top position. Keep the placement consistent across pages so users learn where to look for them.

Spacing

Breadcrumbs use 8px spacing above and below the component.

Accessibility

• Use <nav> element with aria-label="breadcrumb"
• Use <ol> for semantic ordered list structure
• Mark current page with aria-current="page"
• Use aria-disabled="true" for non-interactive current page
• Separators should have role="presentation" to hide from screen readers
• Ensure keyboard navigation works with Tab and Enter
• Target size: trail links use a 40px target size