Skip to content

Latest commit

 

History

History
56 lines (50 loc) · 1.7 KB

README.md

File metadata and controls

56 lines (50 loc) · 1.7 KB
Raw

Breadcrumbs

Shows where the user is within the app hierarchy.

Usage

<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="/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="/icons/svg/sprite.svg#chevron-right" />
      </svg>
    </li>
    <li class="d-tablet-none">
      <svg width="24" height="24">
        <use xlink:href="/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="/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>

Dealing with long titles

When you need to shorten the title of the Breadcrumbs item you can use a helper class text-truncate with defined width.

<!-- … --->
<li class="d-none d-tablet-flex">
  <a href="#currentUrl" aria-current="page" class="link-secondary text-truncate" style="max-width: 100px;">
    This is a very long title of the current page
  </a>
  <svg width="24" height="24">
    <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
  </svg>
</li>
<!-- … --->