{{#> web/layout/default title="Breadcrumbs" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Default</h2>

    <nav aria-label="Breadcrumb" class="Breadcrumbs">

      <ol>
        <li class="d-none d-tablet-flex">
          <a href="#rootUrl" class="link-primary link-underlined">Root</a>
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
          </svg>
        </li>
        <li class="d-none d-tablet-flex">
          <a href="#categoryUrl" class="link-primary link-underlined">Category</a>
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
          </svg>
        </li>
        <li class="d-tablet-none">
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-left" />
          </svg>
          <a href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
        </li>
        <li class="d-none d-tablet-flex">
          <a href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
          </svg>
        </li>
        <li class="d-none d-tablet-flex">
          <a href="#currentUrl" aria-current="page" class="link-secondary">Current page</a>
        </li>
      </ol>
    </nav>

  </div>

</section>

<!--
  This code is a copy of the 'Default' section.
  We need a visually identical demo to the Twig & React, where we have both the 'Default' and 'Custom' implementations.
-->
<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Custom</h2>

    <nav aria-label="Breadcrumb" class="Breadcrumbs">
      <ol>
        <li class="d-none d-tablet-flex">
          <a href="#rootUrl" class="link-primary link-underlined">Root</a>
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
          </svg>
        </li>
        <li class="d-none d-tablet-flex">
          <a href="#categoryUrl" class="link-primary link-underlined">Category</a>
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
          </svg>
        </li>
        <li class="d-tablet-none">
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-left" />
          </svg>
          <a href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
        </li>
        <li class="d-none d-tablet-flex">
          <a href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
          </svg>
        </li>
        <li class="d-none d-tablet-flex">
          <a href="#currentUrl" aria-current="page" class="link-secondary">Current page</a>
        </li>
      </ol>
    </nav>

  </div>

</section>


<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Current page is not a link</h2>

    <nav aria-label="Breadcrumb" class="Breadcrumbs">
      <ol>
        <li class="d-none d-tablet-flex">
          <a href="#rootUrl" class="link-primary link-underlined">Root</a>
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
          </svg>
        </li>
        <li class="d-none d-tablet-flex">
          <a href="#categoryUrl" class="link-primary link-underlined">Category</a>
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
          </svg>
        </li>
        <li class="d-tablet-none">
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-left" />
          </svg>
          <a href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
        </li>
        <li class="d-none d-tablet-flex">
          <a href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
          <svg width="24" height="24">
            <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
          </svg>
        </li>
        <li class="d-none d-tablet-flex">
          Current page
        </li>
      </ol>
    </nav>

  </div>

</section>

{{/web/layout/default }}