{ CF }
22 examples Responsive Uses JS beginner

22 CSS Breadcrumbs

breadcrumbsnavigationcss-onlyanimationinteractive

22 semantically correct, accessible CSS breadcrumb designs — from underline grow to progress steps, holographic shimmer and copy-path. All use scoped class-based CSS with no inline styles.

22 unique designs 21 Pure CSS 1 CSS+JS 0 dependencies
01 / 22
Underline Grow
Pure CSS

A gradient underline grows from left to right on hover. Current page uses a solid accent line.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumb__item { display: flex; align-items: center; }
.breadcrumb__item + .breadcrumb__item::before {
  content: "/"; padding: 0 12px;
  color: rgba(255,255,255,.2); font-size: 14px;
}
.breadcrumb__link {
  position: relative; font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.45); text-decoration: none;
  padding-bottom: 2px; transition: color .25s;
}
.breadcrumb__link::after {
  content: ""; position: absolute;
  bottom: 0; left: 0; width: 100%; height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #8b7fff, #ff6b9d);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.23,1,.32,1);
}
.breadcrumb__link:hover { color: rgba(255,255,255,.85); }
.breadcrumb__link:hover::after { transform: scaleX(1); }
.breadcrumb__link--current {
  color: #fff; pointer-events: none;
}
.breadcrumb__link--current::after {
  background: #8b7fff; transform: scaleX(1);
}
02 / 22
Pill Breadcrumbs
Pure CSS

Each crumb is a rounded pill. Hover blooms a background. Current page shows solid accent fill.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__sep" aria-hidden="true">&rsaquo;</li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: center;
  gap: 4px; list-style: none; padding: 0; margin: 0;
}
.breadcrumb__sep {
  color: rgba(255,255,255,.2); font-size: 16px;
  user-select: none; padding: 0 2px;
}
.breadcrumb__link {
  padding: 5px 14px; border-radius: 50px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.45); text-decoration: none;
  display: block; transition: background .25s, color .25s;
}
.breadcrumb__link:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
}
.breadcrumb__link--current {
  background: rgba(139,127,255,.18);
  color: #8b7fff; pointer-events: none;
}
03 / 22
Diagonal Slash
Pure CSS

Parallelogram-shaped crumbs using clip-path. Active fills with gradient; hover lifts slightly.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; list-style: none; padding: 0; margin: 0; gap: 2px;
}
.breadcrumb__link {
  display: block; padding: 8px 22px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.4); text-decoration: none;
  background: rgba(255,255,255,.05);
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background .25s, color .25s, transform .25s;
}
.breadcrumb__link:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85); transform: translateY(-2px);
}
.breadcrumb__link--current {
  background: linear-gradient(135deg, #8b7fff, #ff6b9d);
  color: #fff; pointer-events: none;
}
04 / 22
Neon Trail
Pure CSS

Neon glow builds along each separator arrow. Current page pulses with a multi-layer glow.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "→"; padding: 0 10px;
  color: rgba(61,232,245,.25); font-size: 13px;
  transition: color .3s, text-shadow .3s;
}
.breadcrumb__item:hover + .breadcrumb__item::before,
.breadcrumb__item + .breadcrumb__item:hover::before {
  color: #3de8f5; text-shadow: 0 0 8px #3de8f5;
}
.breadcrumb__link {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.38); text-decoration: none;
  transition: color .25s, text-shadow .25s;
}
.breadcrumb__link:hover {
  color: #3de8f5;
  text-shadow: 0 0 10px rgba(61,232,245,.5);
}
.breadcrumb__link--current {
  color: #3de8f5; pointer-events: none;
  text-shadow: 0 0 8px #3de8f5, 0 0 20px rgba(61,232,245,.4);
}
05 / 22
Brutalist Hard Shadow
Pure CSS

Hard offset box-shadows. Hover shifts the shadow. Current page inverts to a filled block.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__sep" aria-hidden="true">╱</li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: center;
  gap: 8px; list-style: none; padding: 0; margin: 0;
}
.breadcrumb__sep {
  color: rgba(255,255,255,.2); font-size: 12px; user-select: none;
}
.breadcrumb__link {
  display: block; padding: 6px 16px;
  border: 2px solid rgba(255,255,255,.6);
  font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55); text-decoration: none;
  box-shadow: 2px 2px 0 rgba(255,255,255,.4);
  transition: transform .1s, box-shadow .1s, background .1s, color .1s;
}
.breadcrumb__link:hover {
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 rgba(255,255,255,.5); color: #fff;
}
.breadcrumb__link--current {
  background: #eeeaf8; color: #07070c;
  border-color: #eeeaf8;
  box-shadow: 2px 2px 0 rgba(139,127,255,.5);
  pointer-events: none;
}
06 / 22
Frosted Glass
Pure CSS

Glass pill breadcrumbs with backdrop-filter over a gradient background.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb {
  background:
    radial-gradient(60% 120% at 20% 50%, rgba(139,127,255,.5), transparent),
    radial-gradient(50% 100% at 80% 50%, rgba(255,107,157,.4), transparent),
    #09090f;
  padding: 12px 16px; border-radius: 14px;
}
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "/"; padding: 0 10px;
  color: rgba(255,255,255,.25);
}
.breadcrumb__link {
  padding: 5px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.55); text-decoration: none;
  border: 1px solid transparent;
  transition: backdrop-filter .3s, background .3s, border-color .3s, color .3s;
}
.breadcrumb__link:hover {
  background: rgba(255,255,255,.1); backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,.15); color: #fff;
}
.breadcrumb__link--current {
  background: rgba(255,255,255,.15); backdrop-filter: blur(16px);
  border-color: rgba(255,255,255,.25); color: #fff; pointer-events: none;
}
07 / 22
Vertical Stacked
Pure CSS

Vertical timeline-style breadcrumb with connecting dots and a glowing active indicator.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <span class="breadcrumb__dot" aria-hidden="true"></span>
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--current">
      <span class="breadcrumb__dot breadcrumb__dot--current"></span>
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  list-style: none; padding: 0; margin: 0 0 0 10px;
  display: flex; flex-direction: column;
  border-left: 1px solid rgba(255,255,255,.1);
}
.breadcrumb__item {
  display: flex; align-items: center;
  gap: 10px; padding: 8px 0; position: relative;
}
.breadcrumb__dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  background: transparent; position: absolute; left: -5px;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.breadcrumb__item:hover .breadcrumb__dot {
  border-color: rgba(255,255,255,.6);
}
.breadcrumb__dot--current {
  border-color: #8b7fff; background: #8b7fff;
  box-shadow: 0 0 10px rgba(139,127,255,.6);
}
.breadcrumb__link {
  padding-left: 18px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.38); text-decoration: none;
  transition: color .25s;
}
.breadcrumb__link:hover { color: rgba(255,255,255,.75); }
.breadcrumb__link--current { color: #fff; pointer-events: none; }
08 / 22
Editorial Numbered
Pure CSS

Magazine-style numbered breadcrumbs. Active number swells; separator is a hairline rule.

<li class="breadcrumb__item">
  <span class="breadcrumb__num" aria-hidden="true">01</span>
  <a class="breadcrumb__link" href="#">Home</a>
</li>
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0; gap: 0;
}
.breadcrumb__item { display: flex; align-items: baseline; gap: 6px; }
.breadcrumb__item + .breadcrumb__item {
  padding-left: 20px; margin-left: 20px;
  border-left: 1px solid rgba(255,255,255,.1);
}
.breadcrumb__num {
  font-family: monospace; font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.18); letter-spacing: .06em;
  transition: color .3s, font-size .35s cubic-bezier(.23,1,.32,1);
}
.breadcrumb__num--current { color: #8b7fff; font-size: 14px; }
.breadcrumb__link {
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.38); text-decoration: none;
  transition: color .25s;
}
.breadcrumb__link:hover { color: rgba(255,255,255,.75); }
.breadcrumb__link--current { color: #fff; pointer-events: none; }
09 / 22
Retro Terminal Path
Pure CSS

Unix path-style breadcrumbs with a blinking cursor — looks like navigating a filesystem.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <span class="breadcrumb__prompt">~</span>
      <a class="breadcrumb__link" href="#">home</a>
    </li>
    <li class="breadcrumb__item">
      <span class="breadcrumb__sep">/</span>
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">current</a>
    </li>
    <span class="breadcrumb__cursor">_</span>
  </ol>
</nav>
.breadcrumb {
  background: #050a00; border-radius: 8px; padding: 10px 16px;
  border: 1px solid rgba(30,217,138,.2); font-family: monospace;
  display: inline-block;
}
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0; gap: 0;
}
.breadcrumb__item { display: flex; align-items: center; }
.breadcrumb__prompt { color: rgba(30,217,138,.5); margin-right: 4px; }
.breadcrumb__sep { color: rgba(30,217,138,.3); padding: 0 2px; }
.breadcrumb__link {
  font-size: 13px; color: rgba(30,217,138,.55);
  text-decoration: none; transition: color .2s;
}
.breadcrumb__link:hover { color: #1ed98a; }
.breadcrumb__link--current { color: #1ed98a; pointer-events: none; }
.breadcrumb__cursor {
  color: #1ed98a;
  animation: blink .7s step-end infinite; margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }
10 / 22
Gradient Text
Pure CSS

Each crumb shifts from muted grey to a full gradient on hover. Current page always shows the gradient.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "·"; padding: 0 12px;
  color: rgba(255,255,255,.2); font-size: 16px;
}
.breadcrumb__link {
  font-size: 14px; font-weight: 600; text-decoration: none;
  background: linear-gradient(90deg, #8b7fff, #ff6b9d, #3de8f5);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: grayscale(1) opacity(.4);
  transition: filter .35s;
}
.breadcrumb__link:hover { filter: grayscale(0) opacity(1); }
.breadcrumb__link--current {
  filter: grayscale(0) opacity(1); pointer-events: none;
}
11 / 22
Chip with Icon
Pure CSS

Rounded chip breadcrumbs each with an icon. Active chip fills with accent gradient.

<li class="breadcrumb__item">
  <a class="breadcrumb__link" href="#">
    <span class="breadcrumb__icon" aria-hidden="true">⌂</span>
    <span class="breadcrumb__text">Home</span>
  </a>
</li>
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0; gap: 6px;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "›"; color: rgba(255,255,255,.2); font-size: 16px; margin-right: 6px;
}
.breadcrumb__link {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); text-decoration: none;
  transition: background .25s, border-color .25s, transform .25s;
}
.breadcrumb__link:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2); transform: translateY(-1px);
}
.breadcrumb__icon { font-size: 13px; color: rgba(255,255,255,.35); }
.breadcrumb__text { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.45); }
.breadcrumb__link--current {
  background: linear-gradient(135deg, #8b7fff, #ff6b9d);
  border-color: transparent; pointer-events: none;
}
.breadcrumb__link--current .breadcrumb__icon,
.breadcrumb__link--current .breadcrumb__text { color: #fff; }
12 / 22
Conic Halo
Pure CSS

Current page item gets a spinning rainbow conic-gradient border halo.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <span class="breadcrumb__halo-wrap">
        <a class="breadcrumb__link breadcrumb__link--current"
           aria-current="page" href="#">Current</a>
      </span>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "/"; padding: 0 12px; color: rgba(255,255,255,.2);
}
.breadcrumb__link {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.4); text-decoration: none; transition: color .25s;
}
.breadcrumb__link:hover { color: rgba(255,255,255,.8); }
.breadcrumb__halo-wrap {
  position: relative; display: inline-block;
  padding: 2px; border-radius: 6px;
}
.breadcrumb__halo-wrap::before {
  content: ""; position: absolute; inset: -2px; border-radius: 8px;
  background: conic-gradient(#8b7fff,#ff6b9d,#3de8f5,#1ed98a,#f5a84a,#8b7fff);
  animation: halo-spin 2.5s linear infinite;
}
@keyframes halo-spin { to { transform: rotate(360deg); } }
.breadcrumb__link--current {
  position: relative; z-index: 1;
  background: #111; padding: 4px 10px; border-radius: 5px;
  color: #fff; display: block; pointer-events: none;
}
13 / 22
Floating Island
Pure CSS

Each crumb is a floating card that springs upward on hover with a shadow bloom.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0; gap: 8px;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "→"; color: rgba(255,255,255,.15); font-size: 12px;
}
.breadcrumb__link {
  display: block; padding: 7px 16px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.4);
  text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: background .3s, border-color .3s, color .3s,
              transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.breadcrumb__link:hover {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18);
  color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.breadcrumb__link--current {
  background: rgba(139,127,255,.15); border-color: rgba(139,127,255,.35);
  color: #8b7fff; transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(139,127,255,.2); pointer-events: none;
}
14 / 22
Scale Peek
Pure CSS

On hover the whole list dims and scales down — only the hovered crumb scales up to full.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "›"; padding: 0 8px;
  color: rgba(255,255,255,.2); font-size: 16px;
}
.breadcrumb__link {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.45); text-decoration: none;
  transition: color .25s, opacity .25s, transform .25s;
}
.breadcrumb__list:hover .breadcrumb__link {
  opacity: .35; transform: scale(.96);
}
.breadcrumb__list:hover .breadcrumb__link:hover {
  opacity: 1; transform: scale(1.05); color: #fff;
}
.breadcrumb__link--current { color: #8b7fff; pointer-events: none; }
15 / 22
Holographic Shimmer
Pure CSS

Current page gets a looping rainbow holographic background. Past crumbs are plain text.

<a class="breadcrumb__link breadcrumb__link--current"
   aria-current="page" href="#">
  <span class="breadcrumb__shine" aria-hidden="true"></span>
  <span class="breadcrumb__text">Current</span>
</a>
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "/"; padding: 0 12px; color: rgba(255,255,255,.2);
}
.breadcrumb__link {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.4); text-decoration: none; transition: color .25s;
}
.breadcrumb__link:hover { color: rgba(255,255,255,.8); }
.breadcrumb__link--current {
  position: relative; overflow: hidden; display: inline-flex;
  align-items: center; padding: 4px 12px; border-radius: 6px;
  pointer-events: none;
}
.breadcrumb__shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg,#8b7fff,#ff6b9d,#3de8f5,#1ed98a,#f5a84a,#8b7fff);
  background-size: 300% 100%;
  animation: holo 3s linear infinite;
}
@keyframes holo {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}
.breadcrumb__text { position: relative; z-index: 1; color: #fff; font-weight: 700; }
16 / 22
Arrow Chain
Pure CSS

CSS arrow-chevron breadcrumbs using border triangles — no SVG or images needed.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list { display: flex; list-style: none; padding: 0; margin: 0; }
.breadcrumb__link {
  display: flex; align-items: center;
  padding: 8px 12px 8px 24px; position: relative;
  font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.45);
  text-decoration: none; margin-left: -10px;
  transition: background .25s, color .25s;
}
.breadcrumb__item:first-child .breadcrumb__link {
  padding-left: 16px; border-radius: 8px 0 0 8px; margin-left: 0;
}
.breadcrumb__link::after {
  content: ""; position: absolute; right: -10px; top: 0;
  width: 0; height: 100%;
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 10px solid rgba(255,255,255,.06);
  z-index: 1; transition: border-left-color .25s;
}
.breadcrumb__link:hover {
  background: rgba(255,255,255,.12); color: #fff; z-index: 2;
}
.breadcrumb__link:hover::after { border-left-color: rgba(255,255,255,.12); }
.breadcrumb__link--current {
  background: #8b7fff; color: #fff; pointer-events: none; z-index: 2;
  border-radius: 0 8px 8px 0;
}
.breadcrumb__link--current::after { display: none; }
17 / 22
Dotted Separator
Pure CSS

Ellipsis dots between crumbs that expand on hover for a subtle kinetic effect.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "···"; padding: 0 10px;
  color: rgba(255,255,255,.18); font-size: 14px;
  letter-spacing: 2px;
  transition: color .25s, letter-spacing .3s;
}
.breadcrumb__item:hover + .breadcrumb__item::before {
  color: rgba(255,255,255,.45); letter-spacing: 4px;
}
.breadcrumb__link {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.4); text-decoration: none; transition: color .25s;
}
.breadcrumb__link:hover { color: rgba(255,255,255,.85); }
.breadcrumb__link--current { color: #fff; pointer-events: none; }
18 / 22
Bordered Box
Pure CSS

All crumbs share one bordered container with dividers. Active gets an inset top+bottom accent stroke.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: center; list-style: none; padding: 0; margin: 0;
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px; overflow: hidden;
}
.breadcrumb__item + .breadcrumb__item { border-left: 1px solid rgba(255,255,255,.1); }
.breadcrumb__link {
  display: block; padding: 9px 18px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.4); text-decoration: none;
  transition: background .25s, color .25s;
}
.breadcrumb__link:hover { background: rgba(255,255,255,.07); color: #fff; }
.breadcrumb__link--current {
  background: rgba(139,127,255,.12); color: #8b7fff; pointer-events: none;
  box-shadow: inset 0 2px 0 #8b7fff, inset 0 -2px 0 #8b7fff;
}
19 / 22
Progress Track
Pure CSS

Stepper-style breadcrumb with numbered nodes connected by a track line — great for multi-step flows.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item breadcrumb__item--done">
      <div class="breadcrumb__node">✓</div>
      <a class="breadcrumb__link" href="#">Step 1</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--done">
      <div class="breadcrumb__node breadcrumb__node--current">2</div>
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Step 2</a>
    </li>
    <li class="breadcrumb__item">
      <div class="breadcrumb__node breadcrumb__node--next">3</div>
      <span class="breadcrumb__label">Step 3</span>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: flex-start;
  list-style: none; padding: 0; margin: 0; gap: 0;
}
.breadcrumb__item {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px; flex: 1; position: relative;
}
.breadcrumb__item::before {
  content: ""; position: absolute; top: 14px;
  left: calc(50% + 14px); right: calc(-50% + 14px);
  height: 2px; background: rgba(255,255,255,.1);
}
.breadcrumb__item:last-child::before { display: none; }
.breadcrumb__item--done::before { background: #8b7fff; }
.breadcrumb__node {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.35); transition: all .3s;
}
.breadcrumb__item--done .breadcrumb__node {
  background: #8b7fff; border-color: #8b7fff; color: #fff;
}
.breadcrumb__node--current {
  background: transparent; border-color: #8b7fff; color: #8b7fff;
  box-shadow: 0 0 0 4px rgba(139,127,255,.2);
}
.breadcrumb__node--next { opacity: .4; }
.breadcrumb__link {
  font-size: 11px; font-weight: 600; text-decoration: none;
  color: rgba(255,255,255,.4); text-align: center; transition: color .25s;
}
.breadcrumb__link--current { color: #8b7fff; pointer-events: none; }
.breadcrumb__label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.2); }
20 / 22
Glassmorphism Bar
Pure CSS

All crumbs live inside a single frosted glass pill container with blur and saturation.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb {
  display: inline-block;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50px; padding: 4px;
}
.breadcrumb__list {
  display: flex; align-items: center; list-style: none; padding: 0; margin: 0;
}
.breadcrumb__item + .breadcrumb__item { border-left: 1px solid rgba(255,255,255,.12); }
.breadcrumb__link {
  display: block; padding: 6px 16px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.55); text-decoration: none; border-radius: 50px;
  transition: background .3s, color .3s;
}
.breadcrumb__link:hover { background: rgba(255,255,255,.12); color: #fff; }
.breadcrumb__link--current {
  background: rgba(139,127,255,.25); color: #fff; pointer-events: none;
}
21 / 22
Wave Underline
Pure CSS

An animated SVG wave appears under each link on hover — the current page keeps the wave active.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link breadcrumb__link--current"
         aria-current="page" href="#">Current</a>
    </li>
  </ol>
</nav>
.breadcrumb__list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "›"; padding: 0 10px;
  color: rgba(255,255,255,.2); font-size: 18px;
}
.breadcrumb__link {
  position: relative; font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.45); text-decoration: none;
  padding-bottom: 6px; transition: color .25s;
}
.breadcrumb__link::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath d='M0 2 Q5 0 10 2 Q15 4 20 2' fill='none' stroke='%238b7fff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 20px 4px; background-repeat: repeat-x;
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s, transform .3s;
  animation: wave 1.2s linear infinite paused;
}
.breadcrumb__link:hover::after,
.breadcrumb__link--current::after {
  opacity: 1; transform: translateY(0); animation-play-state: running;
}
@keyframes wave {
  from { background-position: 0 0; }
  to   { background-position: 20px 0; }
}
.breadcrumb__link:hover { color: rgba(255,255,255,.85); }
.breadcrumb__link--current { color: #8b7fff; pointer-events: none; }
22 / 22
Copy Path
CSS+JS

Standard breadcrumb with a copy button that copies the current URL path and shows a toast.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <div class="breadcrumb__wrap">
    <ol class="breadcrumb__list">
      <li class="breadcrumb__item">
        <a class="breadcrumb__link" href="#">Home</a>
      </li>
      <li class="breadcrumb__item">
        <a class="breadcrumb__link breadcrumb__link--current"
           aria-current="page" href="#">Current</a>
      </li>
    </ol>
    <button class="breadcrumb__copy-btn" aria-label="Copy path">⎘</button>
  </div>
  <span class="breadcrumb__toast">Copied!</span>
</nav>
.breadcrumb { position: relative; }
.breadcrumb__wrap { display: flex; align-items: center; gap: 8px; }
.breadcrumb__list {
  display: flex; align-items: center; list-style: none; padding: 0; margin: 0;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "/"; padding: 0 10px; color: rgba(255,255,255,.2);
}
.breadcrumb__link {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.4); text-decoration: none; transition: color .25s;
}
.breadcrumb__link:hover { color: rgba(255,255,255,.8); }
.breadcrumb__link--current { color: #fff; pointer-events: none; }
.breadcrumb__copy-btn {
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); cursor: pointer;
  font-size: 14px; color: rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
}
.breadcrumb__copy-btn:hover {
  background: rgba(139,127,255,.2);
  border-color: rgba(139,127,255,.4); color: #8b7fff;
}
.breadcrumb__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 .2s, transform .2s; white-space: nowrap;
}
.breadcrumb__toast--show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
const btn   = document.querySelector('.breadcrumb__copy-btn');
const toast = document.querySelector('.breadcrumb__toast');
btn.addEventListener('click', () => {
  navigator.clipboard.writeText(window.location.href).then(() => {
    toast.classList.add('breadcrumb__toast--show');
    setTimeout(() => toast.classList.remove('breadcrumb__toast--show'), 2000);
  });
});

Related collections

26 CSS Accordions — Vertical & Horizontal preview

26 CSS Accordions — Vertical & Horizontal

26

26 free CSS accordions — 17 vertical and 9 horizontal layouts with copy-paste HTML and CSS.

accordion vertical accordion horizontal accordion Responsive
21 CSS Circular Menu Designs preview

21 CSS Circular Menu Designs

21

21 free CSS circular menu designs — radial, dome, orbital and skeumorphic layouts with copy-paste HTML and CSS.

css circular menu radial menu dome menu Responsive
20 CSS Tabs preview

20 CSS Tabs

20

20 original CSS tab designs — ink slider, aurora pill, frosted crystal, brutalist press, iOS segmented, bento grid, CRT terminal and more. Copy-paste ready.

tabs navigation animation Responsive