<nav class="bc-22" aria-label="Breadcrumb">
  <div class="bc-22__wrap">
    <ol class="bc-22__list">
      <li class="bc-22__item"><a class="bc-22__link" href="javascript:void(0)">Home</a></li>
      <li class="bc-22__item"><a class="bc-22__link" href="javascript:void(0)">Navigation</a></li>
      <li class="bc-22__item">
        <a class="bc-22__link bc-22__link--cur" aria-current="page" href="javascript:void(0)"
          >Breadcrumbs</a
        >
      </li>
    </ol>
    <button class="bc-22__copy" id="bc22-btn" aria-label="Copy path">
      <span class="bc-22__copy-icon" aria-hidden="true">⎘</span>
    </button>
  </div>
  <span class="bc-22__toast" id="bc22-toast">Copied!</span>
</nav>

.bc-22 {
  position: relative;
}

.bc-22__wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bc-22__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-22__item + .bc-22__item::before {
  content: "/";
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.2);
}

.bc-22__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-22__link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.bc-22__link--cur {
  color: #fff;
  pointer-events: none;
}

.bc-22__copy {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.bc-22__copy:hover {
  background: rgba(139, 127, 255, 0.2);
  border-color: rgba(139, 127, 255, 0.4);
  color: #8b7fff;
}

.bc-22__copy-icon {
  line-height: 1;
  display: block;
}

.bc-22__toast {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #8b7fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  white-space: nowrap;
}

.bc-22__toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

document.querySelectorAll(".bc-22__copy").forEach(function (btn) {
  btn.addEventListener("click", function () {
    var toast = btn.closest(".bc-22").querySelector(".bc-22__toast");
    navigator.clipboard.writeText(window.location.href).then(function () {
      toast.classList.add("bc-22__toast--show");
      setTimeout(function () {
        toast.classList.remove("bc-22__toast--show");
      }, 2000);
    });
  });
});