Copy Path
Standard breadcrumb with a copy button that copies the current URL path and shows a toast.
Copy Path the 22nd of 22 designs in the 22 CSS Breadcrumbs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<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);
});
});
});