Scroll Fade Breadcrumb

<nav aria-label="Breadcrumb" class="nuda-bc2-scroll">
  <div class="nuda-bc2-scroll__track" tabindex="0">
    <ol class="nuda-bc2-scroll__list">
      <li class="nuda-bc2-scroll__item"><a class="nuda-bc2-scroll__link" href="#">Home</a></li>
      <li class="nuda-bc2-scroll__sep" aria-hidden="true">/</li>
      <li class="nuda-bc2-scroll__item"><a class="nuda-bc2-scroll__link" href="#">Workspace</a></li>
      <li class="nuda-bc2-scroll__sep" aria-hidden="true">/</li>
      <li class="nuda-bc2-scroll__item"><a class="nuda-bc2-scroll__link" href="#">Projects</a></li>
      <li class="nuda-bc2-scroll__sep" aria-hidden="true">/</li>
      <li class="nuda-bc2-scroll__item"><a class="nuda-bc2-scroll__link" href="#">2024-Q3</a></li>
      <li class="nuda-bc2-scroll__sep" aria-hidden="true">/</li>
      <li class="nuda-bc2-scroll__item"><span class="nuda-bc2-scroll__link nuda-bc2-scroll__link--cur" aria-current="page">Summary</span></li>
    </ol>
  </div>
  <span class="nuda-bc2-scroll__hint" aria-hidden="true">›</span>
</nav>

.nuda-bc2-scroll {
  position: relative;
  width: 260px;
}

.nuda-bc2-scroll__track {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-mask-image: linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 28px),transparent);
  mask-image: linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 28px),transparent);
  scrollbar-width: none;
}

.nuda-bc2-scroll__track::-webkit-scrollbar {
  display: none;
}

.nuda-bc2-scroll__track:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-bc2-scroll__list {
  display: flex;
  align-items: center;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: .4rem 24px;
  white-space: nowrap;
  font-size: .78rem;
}

.nuda-bc2-scroll__link {
  color: #999;
  text-decoration: none;
}

.nuda-bc2-scroll__link:hover {
  color: #e4ff54;
}

.nuda-bc2-scroll__link--cur {
  color: #fafafa;
  font-weight: 600;
}

.nuda-bc2-scroll__sep {
  color: #444;
}

.nuda-bc2-scroll__hint {
  position: absolute;
  right: 2px;
  top: 50%;
  color: #e4ff54;
  pointer-events: none;
  animation: _nuda-bc2scrollhint 1.8s ease-in-out infinite;
}

@keyframes _nuda-bc2scrollhint {
  0%,100% {
    opacity: .3;
    transform: translate(0,-50%);
  }
  50% {
    opacity: 1;
    transform: translate(3px,-50%);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-bc2-scroll__hint {
    animation: none !important;
    opacity: .6;
    transform: translate(0,-50%);
  }
}