Skip to main contentSkip to site searchSkip to component search
Honeycomb

Breadcrumbs

The breadcrumb component shows the current page of the user relative to other i.e. pages. It helps users to track their path while navigating back and forth and creates an understanding of the product's hierarchy from highest to lowest.

<nav aria-label="Breadcrumbs">
  <ol class="flix-breadcrumbs">
    <li class="flix-breadcrumbs__item">
      <a class="flix-breadcrumbs__link" href="#">Home</a>
    </li>
    <li class="flix-breadcrumbs__item">
      <a class="flix-breadcrumbs__link" href="#">Germany</a>
    </li>
    <li class="flix-breadcrumbs__item">
      <a class="flix-breadcrumbs__link" href="#">Bavaria</a>
    </li>
    <li class="flix-breadcrumbs__item">
      <span class="flix-breadcrumbs__link" aria-current="page">Munich</span>
    </li>
  </ol>
</nav>

With ellipsis

If more than 7 items are to be displayed on your breadcrumbs you can use the ellipsis to collapse intermediate items, make sure to always render the first and last item and insert the flix-breadcrumbs__ellipsis element in between. E.g:

<nav aria-label="Breadcrumbs">
  <ol class="flix-breadcrumbs">
    <li class="flix-breadcrumbs__item">
      <a class="flix-breadcrumbs__link" href="#">Universe</a>
    </li>
    <li class="flix-breadcrumbs__item">
      <a class="flix-breadcrumbs__link" href="#">Milky way</a>
    </li>
    <li class="flix-breadcrumbs__item" aria-hidden="true">
      <span class="flix-breadcrumbs__ellipsis"></span>
    </li>
    <li class="flix-breadcrumbs__item">
      <a class="flix-breadcrumbs__link" href="#">Germany</a>
    </li>
    <li class="flix-breadcrumbs__item">
      <span class="flix-breadcrumbs__link" aria-current="page">Berlin</span>
    </li>
  </ol>
</nav>

If your pages have particularly long names they will be clamped to save space, specially useful on smaller screen or biggrer font sizes.

You can use the --no-clamp modifer on a breadcrumbs link if you wish to disable that behavior, in case you want the full link name to be visible.

<nav aria-label="Breadcrumb">
  <ol class="flix-breadcrumbs">
    <li class="flix-breadcrumbs__item">
      <a class="flix-breadcrumbs__link" href="#">Long link text that clamps long link text that clamps long link text that clamps long link text that clamps</a>
    </li>
    <li class="flix-breadcrumbs__item">
      <a class="flix-breadcrumbs__link flix-breadcrumbs__link--no-clamp" href="#">Long link text that does not clamp long link text that does not clamp</a>
    </li>
  </ol>
</nav>