Breadcrumbs

Responsive breadcrumb trail

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>