39 CSS Breadcrumbs
05 / 39

All 39 in 39 CSS Breadcrumbs

  1. 01Accessible Breadcrumb Navigation with Schema.org Microdata & ARIA
  2. 02Responsive Collapsing CSS Breadcrumb Bar using :has() Selector
  3. 03Adaptive Light & Dark Mode Breadcrumb Bar with CSS Custom Properties
  4. 04E-Commerce Filter & Attribute Breadcrumb Navigation Component
  5. 05Modern Glassmorphism Floating Breadcrumb Bar UI Design
  6. 06Neumorphic Soft UI Breadcrumb Navigation with Dual Box Shadows
  7. 07Sticky Top CSS Navigation Header with Shrinking Breadcrumb Trail
  8. 08Material Design Flat Breadcrumb Navigation Bar
  9. 09Isometric 3D Layered CSS Breadcrumb Navigation
  10. 10Breadcrumb Bar with Built-In Dropdown Sibling Menus
  11. 11Full-Width Block-Style Segmented CSS Breadcrumb Bar
  12. 12CSS Custom-Property Accent-Color Toggle Breadcrumb
  13. 13Seamless Arrow-Cutout CSS3 Breadcrumb Trail
  14. 14Compact Icon-Only Home Node CSS Breadcrumb Bar
  15. 15Segmented Rounded-Outline Pill CSS Breadcrumb
  16. 16Neumorphic Soft Inset-Shadow CSS Breadcrumbs
  17. 17CSS Grid Auto-Fitting Responsive Breadcrumb Trail
  18. 18NFT/Web3 Holographic Shimmer Breadcrumb Component
  19. 19SaaS Marketing Site Gradient Text Breadcrumb Bar
  20. 20Airbnb-Style Filter Chip Breadcrumb Navigation with Icons
  21. 21Editorial Blog Breadcrumb with Animated Wave Underline Hover
  22. 22Developer Docs Breadcrumb with One-Click Path Copy to Clipboard
  23. 23Modern Pure CSS Arrow Breadcrumb Bar using clip-path Polygons
  24. 24Multi-Line Aligned CSS Grid Subgrid Breadcrumb Layout
  25. 25Interactive Breadcrumb Links with Animated CSS Underline Glow
  26. 26Minimalist CSS Breadcrumb with Custom SVG Separators
  27. 27Multi-Step Checkout & Form Wizard CSS Breadcrumb Indicator
  28. 28Pure CSS Ribbon-Style Chevron Breadcrumb Trail
  29. 29Pill-Shape Badge CSS Breadcrumb Bar UI
  30. 30Clean Line-Separator Minimalist CSS Breadcrumbs
  31. 31Gradient Background Glow CSS Breadcrumb Bar
  32. 32Floating Card Shadow CSS Breadcrumb Navigation
  33. 33Truncated Ellipsis Compact CSS Mobile Breadcrumb
  34. 34Inline Bullet-Point Dot Separator CSS Breadcrumb
  35. 35Skewed Parallel Quadrilateral CSS Breadcrumb Bar
  36. 36Outline Border-Only Geometric CSS Breadcrumbs
  37. 37Circular Icon & Numbered CSS Step Breadcrumbs
  38. 38Frosted Glass Dark UI CSS Breadcrumb Component
  39. 39Modern Micro-Interaction Animated Hover Breadcrumbs
Pure CSSMIT licensed

Modern Glassmorphism Floating Breadcrumb Bar UI Design

A frosted-glass breadcrumb pill floating over a colourful backdrop: heavy backdrop-filter blur + saturation, a light-catching gradient hairline border, and a shimmer sweep across the bar on hover. The premium 'floating UI' treatment for hero sections and creative landings — kept readable and keyboard-accessible.

Live Demo
Plain CSSTailwind v4
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="bc-05">
  <nav aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Collections</a></li>
      <li><a href="#" aria-current="page">Aurora Series</a></li>
    </ol>
  </nav>
</div>
.bc-05 {
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 48px 32px;
  display: flex;
  justify-content: center;
  background: linear-gradient(120deg,oklch(0.55 0.2 300),oklch(0.6 0.18 220) 45%,oklch(0.68 0.16 180));
  align-items: center;
  justify-content: center;
}

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

.bc-05 ol {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.08)) padding-box,linear-gradient(155deg,rgba(255,255,255,.7),rgba(255,255,255,.15) 40%,rgba(255,255,255,.04)) border-box;
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.25);
}

.bc-05 ol::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  translate: -120% 0;
  transition: translate .7s ease;
  pointer-events: none;
}

.bc-05 ol:hover::after {
  translate: 120% 0;
}

.bc-05 li {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.bc-05 li + li::before {
  content: "›";
  margin: 0 8px;
  color: rgba(255,255,255,.6);
}

.bc-05 a {
  padding: 5px 10px;
  border-radius: 9px;
  font: 600 14px/1 system-ui,sans-serif;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  transition: background-color .2s ease,color .2s ease;
}

.bc-05 a:hover {
  color: #fff;
  background: rgba(255,255,255,.14);
}

.bc-05 a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.bc-05 li[aria-current="page"] a {
  color: #fff;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

@media (prefers-reduced-motion: reduce) {
  .bc-05 ol::after {
    display: none;
  }
}
/* No JavaScript — blur(12px) saturate(180%) frost, a two-layer gradient hairline for the lit rim, and a compositor-only shimmer sweep on hover. */
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: Modern Glassmorphism Floating Breadcrumb Bar UI Design
Source: https://codefronts.com/navigation/css-breadcrumbs/modern-glassmorphism-floating-breadcrumb-bar-ui-design/

A frosted-glass breadcrumb pill floating over a colourful backdrop: heavy backdrop-filter blur + saturation, a light-catching gradient hairline border, and a shimmer sweep across the bar on hover. The premium 'floating UI' treatment for hero sections and creative landings — kept readable and keyboard-accessible.
## HTML
```html
<div class="bc-05">
  <nav aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Collections</a></li>
      <li><a href="#" aria-current="page">Aurora Series</a></li>
    </ol>
  </nav>
</div>
```
## CSS
```css
.bc-05 {
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 48px 32px;
  display: flex;
  justify-content: center;
  background: linear-gradient(120deg,oklch(0.55 0.2 300),oklch(0.6 0.18 220) 45%,oklch(0.68 0.16 180));
  align-items: center;
  justify-content: center;
}

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

.bc-05 ol {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.08)) padding-box,linear-gradient(155deg,rgba(255,255,255,.7),rgba(255,255,255,.15) 40%,rgba(255,255,255,.04)) border-box;
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.25);
}

.bc-05 ol::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  translate: -120% 0;
  transition: translate .7s ease;
  pointer-events: none;
}

.bc-05 ol:hover::after {
  translate: 120% 0;
}

.bc-05 li {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.bc-05 li + li::before {
  content: "›";
  margin: 0 8px;
  color: rgba(255,255,255,.6);
}

.bc-05 a {
  padding: 5px 10px;
  border-radius: 9px;
  font: 600 14px/1 system-ui,sans-serif;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  transition: background-color .2s ease,color .2s ease;
}

.bc-05 a:hover {
  color: #fff;
  background: rgba(255,255,255,.14);
}

.bc-05 a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.bc-05 li[aria-current="page"] a {
  color: #fff;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

@media (prefers-reduced-motion: reduce) {
  .bc-05 ol::after {
    display: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — blur(12px) saturate(180%) frost, a two-layer gradient hairline for the lit rim, and a compositor-only shimmer sweep on hover. */
```

How this works

The glass recipe: a 12% white fill under backdrop-filter:blur(12px) saturate(180%), so the colourful backdrop bleeds through as soft, saturated colour rather than washing to grey. The signature hairline is the two-layer trick — linear-gradient(...) padding-box, linear-gradient(...) border-box with a transparent border — painting a bright rim on the top-left edge that fades away, reading as light catching the pane. A soft drop shadow (0 8px 32px rgba(0,0,0,.12)) lifts the pill off the background.

Hover adds a shimmer: a ::after holding a diagonal linear-gradient highlight sweeps across the bar via a translate transition — a compositor-only move, so it stays smooth. Readability discipline keeps glassmorphism accessible: link text is high-contrast white at 14px minimum, the current crumb sits on a solid-ish fill rather than trusting the frost, and every link keeps a full-contrast :focus-visible ring. prefers-reduced-motion disables the shimmer sweep.

Make it yours

  • Blur/saturate strength is the mood dial: blur(8px) saturate(140%) is subtle; blur(18px) saturate(200%) is heavy frost — pair heavier frost with brighter text.
  • Warm or cool the glass by tinting the fill with color-mix(in oklab, gold 6%, rgba(255,255,255,.12)).
  • The hairline gradient angle (155deg) sets where the 'light' hits — rotate it to match your scene's light source.
  • Drop the shimmer ::after for a calmer bar; keep only the hairline + blur.

Gotchas — read before shipping

  • Glass needs something behind it — over a flat colour the blur does nothing; this demo ships a gradient backdrop so the effect is visible.
  • Never put body text on unguarded frost — the current-crumb fill and high-contrast link colour are the accessibility guards; don't remove them for looks.
  • Layered backdrop-filter is GPU-costly; ONE glass pill is the budget — don't stack ten frosted chips over an animated background.
  • Include the -webkit-backdrop-filter prefix or the effect silently no-ops in Safari.

Browser support

ChromeSafariFirefoxEdge
111+16.4+103+111+

backdrop-filter universal (Safari prefixed, included); gradient border-box trick is old and safe; oklch/color-mix (2023) style the palette.

Techniques used in this demo

backdrop-filterMDN ↗:focus-visibleMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →