Breadcrumbs

Breadcrumbs are a secondary navigation aid that helps users understand where they are in the site’s hierarchy and navigate back through parent pages.

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.

Auto sm md lg xl

volvocars.com

<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>

Expand code Collapse code

Responsive behavior

Breakpoint	Display
sm	Last trail link only, with back chevron icon
md, lg	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.

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