Copyable Path Breadcrumb

<nav aria-label="Breadcrumb" class="nuda-bc2-path">
  <ol class="nuda-bc2-path__list">
    <li class="nuda-bc2-path__item"><a class="nuda-bc2-path__link" href="#">~</a></li>
    <li class="nuda-bc2-path__sep" aria-hidden="true">/</li>
    <li class="nuda-bc2-path__item"><a class="nuda-bc2-path__link" href="#">src</a></li>
    <li class="nuda-bc2-path__sep" aria-hidden="true">/</li>
    <li class="nuda-bc2-path__item"><span class="nuda-bc2-path__link nuda-bc2-path__link--cur" aria-current="page">index.ts</span></li>
  </ol>
  <button type="button" class="nuda-bc2-path__copy" aria-label="Copy path">
    <svg class="nuda-bc2-path__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="10" height="10" rx="1"></rect><path d="M5 15V6a1 1 0 0 1 1-1h9"></path></svg>
    <svg class="nuda-bc2-path__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 12l5 5L20 6"></path></svg>
  </button>
</nav>

.nuda-bc2-path {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 300px;
  padding: .3rem .4rem;
  background: #111;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: .74rem;
}

.nuda-bc2-path__list {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0 .3rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.nuda-bc2-path__item {
  color: #888;
}

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

.nuda-bc2-path__link {
  color: #888;
  text-decoration: none;
}

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

.nuda-bc2-path__link--cur {
  color: #e4ff54;
  font-weight: 600;
}

.nuda-bc2-path__copy {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: #1c1c1c;
  color: #999;
  cursor: pointer;
}

.nuda-bc2-path__copy:hover {
  background: #262626;
  color: #fafafa;
}

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

.nuda-bc2-path__icon,.nuda-bc2-path__check {
  width: 16px;
  height: 16px;
  position: absolute;
}

.nuda-bc2-path__check {
  opacity: 0;
  transform: scale(.4);
  color: #6ee7b7;
}

.nuda-bc2-path__copy:hover .nuda-bc2-path__icon,.nuda-bc2-path__copy:focus-visible .nuda-bc2-path__icon {
  opacity: 0;
  transform: scale(.5) rotate(20deg);
  transition: opacity .18s,transform .18s;
}

.nuda-bc2-path__copy:hover .nuda-bc2-path__check,.nuda-bc2-path__copy:focus-visible .nuda-bc2-path__check {
  animation: _nuda-bc2pathcheck .4s ease forwards;
}

@keyframes _nuda-bc2pathcheck {
  0% {
    opacity: 0;
    transform: scale(.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-bc2-path__icon,.nuda-bc2-path__check {
    transition: none;
  }
  .nuda-bc2-path__copy:hover .nuda-bc2-path__check,.nuda-bc2-path__copy:focus-visible .nuda-bc2-path__check {
    animation: none !important;
    opacity: 1;
    transform: scale(1);
  }
  .nuda-bc2-path__copy:hover .nuda-bc2-path__icon,.nuda-bc2-path__copy:focus-visible .nuda-bc2-path__icon {
    opacity: 0;
    transform: none;
  }
}