39 CSS Breadcrumbs
08 / 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

Material Design Flat Breadcrumb Navigation Bar

A clean Material-Design breadcrumb: flat surface, Roboto-style type scale, and an ink-ripple hover cue that radiates from the pointer on each link — the tactile Material feedback recreated with a pure-CSS radial-gradient ripple, no JS ripple library.

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

<nav class="bc-08" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Materials</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#" aria-current="page">Navigation</a></li>
  </ol>
</nav>
.bc-08 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --primary: oklch(0.5 0.15 265);
  --on: oklch(0.35 0.01 265);
  --mut: oklch(0.6 0.01 265);
  font-family: 'Roboto',system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.97 0.004 265);
  place-items: center;
}

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

.bc-08 ol {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);
}

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

.bc-08 li + li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin: 0 2px;
  background: var(--mut);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.bc-08 a {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 9px 14px;
  border-radius: 8px;
  font: 500 14px/1 'Roboto',system-ui,sans-serif;
  color: var(--primary);
  text-decoration: none;
  transition: background-color .18s ease;
}

.bc-08 a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,color-mix(in oklab,var(--primary) 40%,transparent),transparent 60%);
  translate: -50% -50%;
  scale: 0;
  opacity: 0;
  pointer-events: none;
  transition: scale .4s ease,opacity .5s ease;
}

.bc-08 a:hover {
  background: color-mix(in oklab,var(--primary) 8%,transparent);
}

.bc-08 a:active::after {
  scale: 1;
  opacity: 1;
  transition: scale 0s,opacity 0s;
}

.bc-08 a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.bc-08 li[aria-current="page"] a {
  color: var(--on);
  font-weight: 500;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .bc-08 a,
    .bc-08 a::after {
    transition: none;
  }
}
/* No JavaScript — a radial-gradient ::after scales up on :active for the Material ink ripple; hover paints a color-mix() state layer. Add --x/--y from pointerdown for a pointer-origin ripple. */
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: Material Design Flat Breadcrumb Navigation Bar
Source: https://codefronts.com/navigation/css-breadcrumbs/material-design-flat-breadcrumb-navigation-bar/

A clean Material-Design breadcrumb: flat surface, Roboto-style type scale, and an ink-ripple hover cue that radiates from the pointer on each link — the tactile Material feedback recreated with a pure-CSS radial-gradient ripple, no JS ripple library.
## HTML
```html
<nav class="bc-08" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Materials</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#" aria-current="page">Navigation</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-08 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --primary: oklch(0.5 0.15 265);
  --on: oklch(0.35 0.01 265);
  --mut: oklch(0.6 0.01 265);
  font-family: 'Roboto',system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.97 0.004 265);
  place-items: center;
}

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

.bc-08 ol {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);
}

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

.bc-08 li + li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin: 0 2px;
  background: var(--mut);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.bc-08 a {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 9px 14px;
  border-radius: 8px;
  font: 500 14px/1 'Roboto',system-ui,sans-serif;
  color: var(--primary);
  text-decoration: none;
  transition: background-color .18s ease;
}

.bc-08 a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,color-mix(in oklab,var(--primary) 40%,transparent),transparent 60%);
  translate: -50% -50%;
  scale: 0;
  opacity: 0;
  pointer-events: none;
  transition: scale .4s ease,opacity .5s ease;
}

.bc-08 a:hover {
  background: color-mix(in oklab,var(--primary) 8%,transparent);
}

.bc-08 a:active::after {
  scale: 1;
  opacity: 1;
  transition: scale 0s,opacity 0s;
}

.bc-08 a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.bc-08 li[aria-current="page"] a {
  color: var(--on);
  font-weight: 500;
  cursor: default;
}

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

## JavaScript
```js
/* No JavaScript — a radial-gradient ::after scales up on :active for the Material ink ripple; hover paints a color-mix() state layer. Add --x/--y from pointerdown for a pointer-origin ripple. */
```

How this works

The bar follows Material's flat-surface language: a white surface at elevation 1 (a soft, tight shadow), 14px medium-weight labels, uppercase-free sentence case, and a 4dp-rhythm spacing scale. The signature is the ink ripple: each link has a ::after holding a radial-gradient circle scaled to 0 and centred, and on :active it scales up while fading — the Material 'touch response' radiating from the tap. A lighter :hover state adds Material's 4% state-layer tint over the link.

Purists drive the ripple origin from the pointer with two custom properties (--x/--y) that a couple of JS lines would set on pointerdown; this demo keeps it JS-free by centring the ripple, which reads as Material for a small target like a breadcrumb link. Separators are Material's chevron_right glyph as a masked SVG in the muted on-surface colour. State layers, elevation, and ripple together make it feel like the real system while staying pure CSS and fully keyboard-accessible.

Make it yours

  • Recolour to any Material palette by setting --primary and the on-surface greys; the ripple and hover tint derive from it.
  • Pointer-origin ripple: add --x/--y from a 2-line pointerdown handler if you want the ripple to start under the finger.
  • Bump elevation on the whole bar (larger, softer shadow) for a floating app-bar feel.
  • Swap the chevron for Material's / or navigate_next icon — same masked-SVG slot.

Gotchas — read before shipping

  • Material state layers are opacity tints of the on-surface colour — don't hardcode a grey; derive with color-mix() so it works on any surface.
  • The ripple ::after needs overflow:hidden on the link and pointer-events:none on itself, or it leaks past the target and blocks clicks.
  • Keep contrast: Material's muted separator grey can drop below 3:1 against white — nudge it darker for the non-text-but-meaningful case.
  • Don't uppercase breadcrumb labels 'for Material' — modern Material 3 uses sentence case; uppercase hurts readability of long titles.

Browser support

ChromeSafariFirefoxEdge
120+15.4+121+120+

mask-image (Safari prefixed) for the chevron and color-mix() (2023) for state layers are the modern bits; the ripple is plain transform/opacity and works everywhere.

Techniques used in this demo

aspect-ratioMDN ↗radial-gradient()MDN ↗color-mix()MDN ↗place-items / place-contentMDN ↗:focus-visibleMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →