Skip to main content

Breadcrumb

Types

Default

Result
Loading...
Live Editor
<nav role="navigation" aria-label="breadcrumb">
  <ol class="fds-breadcrumb">
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link">Breadcrumb 1</a>
    </li>
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link">Breadcrumb 2</a>
    </li>
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link fds-breadcrumb__link--current">Breadcrumb 3</a>
    </li>
  </ol>
</nav>

Multiple

Result
Loading...
Live Editor
<nav role="navigation" aria-label="breadcrumb">
  <ol class="fds-breadcrumb fds-breadcrumb--multiple">
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link">Breadcrumb 1</a>
    </li>
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link">Breadcrumb 2</a>
    </li>
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link fds-breadcrumb__link--current">Breadcrumb 3</a>
    </li>
  </ol>
</nav>

Size

Default

Result
Loading...
Live Editor
<nav role="navigation" aria-label="breadcrumb">
  <ol class="fds-breadcrumb">
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link">Breadcrumb 1</a>
    </li>
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link">Breadcrumb 2</a>
    </li>
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link fds-breadcrumb__link--current">Breadcrumb 3</a>
    </li>
  </ol>
</nav>

Small

Result
Loading...
Live Editor
<nav role="navigation" aria-label="breadcrumb">
  <ol class="fds-breadcrumb fds-breadcrumb--sm">
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link">Breadcrumb 1</a>
    </li>
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link">Breadcrumb 2</a>
    </li>
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link fds-breadcrumb__link--current">Breadcrumb 3</a>
    </li>
  </ol>
</nav>

With overflow menu

Result
Loading...
Live Editor
<nav role="navigation" aria-label="breadcrumb">
  <ol class="fds-breadcrumb">
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link">Breadcrumb 1</a>
    </li>
    <li class="fds-breadcrumb__item">
      <div class="fds-overflow-menu">
        <button class="fds-btn fds-btn--ghost fds-btn--icon fds-btn--sm">
          <span class="fds-icon fds-btn__icon"><i class="fa-regular fa-ellipsis"></i></span>
        </button>
        <ul class="fds-overflow-menu__options" tabindex="-1" role="menu">
          <li class="fds-overflow-menu__option" role="none">
            <a class="fds-overflow-menu__option-btn">
              <span class="fds-overflow-menu__option-label">Breadcrumb 2</span>
            </a>
          </li>
          <li class="fds-overflow-menu__option" role="none">
            <a class="fds-overflow-menu__option-btn">
              <span class="fds-overflow-menu__option-label">Breadcrumb 3</span>
            </a>
          </li>
          <li class="fds-overflow-menu__option" role="none">
            <a class="fds-overflow-menu__option-btn">
              <span class="fds-overflow-menu__option-label">Breadcrumb 4</span>
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="fds-breadcrumb__item">
      <a class="fds-breadcrumb__link fds-breadcrumb__link--current">Breadcrumb 5</a>
    </li>
  </ol>
</nav>