Base

Class	Description
.ui-breadcrumb	Base class

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-breadcrumb-separator	"/"	Separator
--ui-breadcrumb-height	var(--ui-row-1)	Overall height
--ui-breadcrumb-gap	calc(var(--ui-unit) * 1)	Gap between children
--ui-breadcrumb-separator-color	var(--ui-color-text-muted)	Separator text color
--ui-breadcrumb-link-color	var(--ui-color-text-muted)	Link text color
--ui-breadcrumb-current-color	var(--ui-color-text)	Current color

<nav aria-label="Breadcrumb">
  <ol class="ui-breadcrumb">
    <li class="ui-breadcrumb__item">
      <a class="ui-breadcrumb__link" href="#">
        <svg class="ui-icon ui-icon--sm" viewBox="0 0 24 24" fill="currentColor">
          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
        </svg>
      </a>
    </li>
    <li class="ui-breadcrumb__item">
      <a class="ui-breadcrumb__link" href="#">Settings</a>
    </li>
    <li class="ui-breadcrumb__item">
      <span class="ui-breadcrumb__current" aria-current="page">Profile</span>
    </li>
  </ol>
</nav>

<!-- Truncate long breadcrumbs with hidden items and an ellipsis indicator. -->
<nav aria-label="Breadcrumb">
  <ol class="ui-breadcrumb">
    <li class="ui-breadcrumb__item">
      <a class="ui-breadcrumb__link" href="#">Home</a>
    </li>
    <li class="ui-breadcrumb__item ui-breadcrumb__item--hidden">
      <a class="ui-breadcrumb__link" href="#">Category</a>
    </li>
    <li class="ui-breadcrumb__item">
      <span class="ui-breadcrumb__ellipsis">...</span>
    </li>
    <li class="ui-breadcrumb__item">
      <span class="ui-breadcrumb__current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>