39 CSS Breadcrumbs08 / 39

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.

Published

Live Demo
Try it

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 ↗color-mix()MDN ↗radial-gradient()MDN ↗place-items / place-contentMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →