39 CSS Breadcrumbs25 / 39

Pure CSSMIT licensed

Interactive Breadcrumb Links with Animated CSS Underline Glow

A minimalist breadcrumb whose links grow a directional animated underline on hover — wiping in from the left on enter, out to the right on leave — with a soft accent glow beneath the text. A tactile micro-interaction built from one ::after pseudo-element and a transform-origin flip, running fully on the compositor.

Published Updated

Live Demo
Try it

The code

<nav class="bc-25" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Journal</a></li>
    <li><a href="#">Typography</a></li>
    <li><a href="#" aria-current="page">Variable Fonts</a></li>
  </ol>
</nav>
.bc-25 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.7 0.17 300);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.16 0.02 300);
  place-items: center;
}

.bc-25 * {
  box-sizing: border-box;
}

.bc-25 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-25 li {
  display: flex;
  align-items: center;
}

.bc-25 li + li::before {
  content: "/";
  margin: 0 14px;
  color: oklch(0.45 0.02 300);
}

.bc-25 a {
  position: relative;
  padding: 3px 1px;
  font: 600 15px/1 system-ui,sans-serif;
  color: oklch(0.8 0.02 300);
  text-decoration: none;
  transition: color .2s ease;
}

.bc-25 a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(0.25,1,0.5,1);
  filter: drop-shadow(0 0 5px var(--accent));
}

.bc-25 a:hover,
.bc-25 a:focus-visible {
  color: #fff;
  outline: none;
}

.bc-25 a:hover::after,
.bc-25 a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.bc-25 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
}

.bc-25 li[aria-current="page"] a {
  color: #fff;
  cursor: default;
}

.bc-25 li[aria-current="page"] a::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .bc-25 a::after {
    transition: none;
  }
}
/* No JavaScript — one ::after underline flips transform-origin between rest (right) and hover (left) for a directional wipe, with a drop-shadow accent glow. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Breadcrumb from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Interactive Breadcrumb Links with Animated CSS Underline Glow
Source: https://codefronts.com/navigation/css-breadcrumbs/underline-grow/

A minimalist breadcrumb whose links grow a directional animated underline on hover — wiping in from the left on enter, out to the right on leave — with a soft accent glow beneath the text. A tactile micro-interaction built from one ::after pseudo-element and a transform-origin flip, running fully on the compositor.
## HTML
```html
<nav class="bc-25" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Journal</a></li>
    <li><a href="#">Typography</a></li>
    <li><a href="#" aria-current="page">Variable Fonts</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-25 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.7 0.17 300);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.16 0.02 300);
  place-items: center;
}

.bc-25 * {
  box-sizing: border-box;
}

.bc-25 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-25 li {
  display: flex;
  align-items: center;
}

.bc-25 li + li::before {
  content: "/";
  margin: 0 14px;
  color: oklch(0.45 0.02 300);
}

.bc-25 a {
  position: relative;
  padding: 3px 1px;
  font: 600 15px/1 system-ui,sans-serif;
  color: oklch(0.8 0.02 300);
  text-decoration: none;
  transition: color .2s ease;
}

.bc-25 a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(0.25,1,0.5,1);
  filter: drop-shadow(0 0 5px var(--accent));
}

.bc-25 a:hover,
.bc-25 a:focus-visible {
  color: #fff;
  outline: none;
}

.bc-25 a:hover::after,
.bc-25 a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.bc-25 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
}

.bc-25 li[aria-current="page"] a {
  color: #fff;
  cursor: default;
}

.bc-25 li[aria-current="page"] a::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .bc-25 a::after {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — one ::after underline flips transform-origin between rest (right) and hover (left) for a directional wipe, with a drop-shadow accent glow. */
```

How this works

Each link carries an ::after underline positioned along its bottom edge, scaled to transform:scaleX(0) with transform-origin:right at rest. On :hover/:focus-visible it animates to scaleX(1) AND flips transform-origin to left — the classic directional-wipe trick: the origin at rest controls the exit (collapses to the right), the hover origin controls the entrance (grows from the left), so the line appears to travel through the word and leave the way it came. A cubic-bezier(0.25, 1, 0.5, 1) ease gives it a quick, confident snap.

The glow is a filter:drop-shadow() in the accent colour applied to the underline, so it reads as a soft neon bloom under the active crumb without a second element. Because both transform and filter are compositor-friendly, the whole interaction is GPU-cheap and never triggers layout. The current-page crumb shows a permanent underline+glow to signal 'you are here'. Reduced-motion users get an instant underline with no travel.

Make it yours

  • Underline thickness + offset are two values on the ::after — 2px sits tight under text, 3px with 4px offset reads bolder.
  • Recolour the glow with the accent variable; the drop-shadow blur radius controls bloom softness.
  • Reverse the direction (wipe in from right) by swapping the two transform-origin values.
  • Add a subtle translateY(-1px) text lift on hover for a combined lift+underline feel.

Gotchas — read before shipping

  • Animate transform:scaleX(), not width — width triggers layout on every frame; scaleX is compositor-only and buttery.
  • The transform-origin flip between rest and hover is the whole effect — set BOTH states or the line just grows/shrinks from one side.
  • drop-shadow() glow is cheap on one element but multiplies if applied to many; keep it on the underline pseudo, not the whole link.
  • Give the current crumb a non-interactive treatment (default cursor, no hover flip) so 'you are here' doesn't feel clickable.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch() as this demo is written. The core technique itself goes back further — Chrome all.

transform, transform-origin, filter:drop-shadow() and :focus-visible are universally supported. Pure micro-interaction, no bleeding-edge dependency.

Techniques used in this demo

filterMDN ↗place-items / place-contentMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →