@use 'sprucecss/scss/spruce' as *;

.breadcrumb {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.breadcrumb-list {
  @include clear-list;
  @include scrollbar;
  align-items: center;
  display: flex;
  font-size: config('font-size-sm', $typography);
  max-inline-size: 100%;
  overflow-x: auto;
  padding-block: spacer('xxs');
  white-space: nowrap;

  > li {
    align-items: center;
    display: inline-flex;
    margin-block: 0;
    padding-block: 0;

    // The separator is a rotated border: decorative, and it points the other way in RTL.
    + li::before {
      block-size: 0.4em;
      border-block-end: 2px solid color('muted');
      border-inline-end: 2px solid color('muted');
      content: '';
      display: inline-flex;
      inline-size: 0.4em;
      margin-inline: 0.75em;
      opacity: 0.6;
      rotate: -45deg;
    }
  }

  a {
    color: color('text');
    text-decoration: none;

    &:hover {
      color: color('primary');
      text-decoration: underline;
    }
  }

  [aria-current='page'] {
    @include text-ellipsis(1);
    color: color('heading');
    display: inline-block;
    font-weight: 600;
    max-inline-size: 24ch;
    text-align: start;
  }
}

[dir='rtl'] .breadcrumb-list > li + li::before {
  rotate: 45deg;
}

<nav class="breadcrumb" aria-label="Breadcrumb">
    <ol class="breadcrumb-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Business</a></li>
        <li><a href="#" aria-current="page">Why mountains are no friend to small businesses</a></li>
    </ol>
</nav>

Breadcrumb List

Anatomy

.breadcrumb is a nav labelled "Breadcrumb", so it's a separate landmark.
.breadcrumb-list is an ordered list (ol), because the order of the levels matters.
The last item is the current page, marked with aria-current="page".

Accessibility

It follows the WAI-ARIA Breadcrumb pattern: a labelled nav, an ordered list and aria-current="page" on the last link.
The separators are CSS pseudo-elements, so screen readers don't read "slash" or "greater than" between the levels.
A long current title is truncated visually (24ch), but the full text is still in the DOM for screen readers.

Technical Details

On narrow screens, the list scrolls horizontally instead of wrapping (with Spruce's thin scrollbar).
The separator is drawn with logical borders and rotates the other way in RTL.
The colors come from the tokens (text, muted, primary); the old breadcrumb color group isn't needed.
Add BreadcrumbList structured data to show the trail in search results.