Breadcrumb

Plain CSS implementation of the Figma Breadcrumb section, node 2411:7111.

Use ordered-list semantics and keep the current item marked with aria-current="page". Overflow menu behavior is consumer-owned.

<nav aria-label="Breadcrumb">
  <ol class="sui-breadcrumb">
    <li class="sui-breadcrumb__item">
      <a class="sui-breadcrumb__link" href="#"><span class="sui-breadcrumb__label">Name page</span></a>
      <span class="sui-icon sui-icon--arrows-angle-right sui-breadcrumb__separator" aria-hidden="true"></span>
    </li>
    <li class="sui-breadcrumb__item">
      <span class="sui-breadcrumb__current" aria-current="page"><span class="sui-breadcrumb__label">Current page</span></span>
    </li>
  </ol>
</nav>

Simple

Header

States

Dark Theme

CSS API