Stacked Trail Breadcrumb
A copy-paste breadcrumbs component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
BreadcrumbsHTMLCSSany framework
Copy into your project
HTML
<nav aria-label="Breadcrumb" class="nuda-bc2-stack">
<ol class="nuda-bc2-stack__list">
<li class="nuda-bc2-stack__item"><a class="nuda-bc2-stack__link" href="#">Home</a></li>
<li class="nuda-bc2-stack__item"><a class="nuda-bc2-stack__link" href="#">Settings</a></li>
<li class="nuda-bc2-stack__item"><a class="nuda-bc2-stack__link" href="#">Account</a></li>
<li class="nuda-bc2-stack__item nuda-bc2-stack__item--cur"><span class="nuda-bc2-stack__link nuda-bc2-stack__link--cur" aria-current="page">Security</span></li>
</ol>
</nav>CSS
.nuda-bc2-stack {
width: 200px;
}
.nuda-bc2-stack__list {
position: relative;
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0 0 0 .9rem;
font-size: .78rem;
}
.nuda-bc2-stack__list::before {
content: "";
position: absolute;
left: .28rem;
top: 6px;
bottom: 6px;
width: 1px;
background: rgba(255,255,255,.12);
}
.nuda-bc2-stack__item {
position: relative;
padding: .3rem 0;
opacity: 0;
transform: translateX(-10px);
animation: _nuda-bc2stackin .4s ease both;
}
.nuda-bc2-stack__item::before {
content: "";
position: absolute;
left: -.9rem;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: #555;
transform: translateY(-50%);
}
.nuda-bc2-stack__item:nth-child(1) {
animation-delay: 0s;
}
.nuda-bc2-stack__item:nth-child(2) {
animation-delay: .08s;
}
.nuda-bc2-stack__item:nth-child(3) {
animation-delay: .16s;
}
.nuda-bc2-stack__item:nth-child(4) {
animation-delay: .24s;
}
.nuda-bc2-stack__link {
color: #999;
text-decoration: none;
}
.nuda-bc2-stack__link:hover {
color: #e4ff54;
}
.nuda-bc2-stack__item--cur::before {
background: #e4ff54;
}
.nuda-bc2-stack__link--cur {
color: #fafafa;
font-weight: 700;
}
@keyframes _nuda-bc2stackin {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-bc2-stack__item {
animation: none !important;
opacity: 1;
transform: none;
}
}
How to use Stacked Trail Breadcrumb
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.