Skip to content

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.

More breadcrumbs components

← Browse all NudaUI components