39 CSS Breadcrumbs26 / 39

Pure CSSMIT licensed

Minimalist CSS Breadcrumb with Custom SVG Separators

The cleanest possible breadcrumb: text links divided by CSS-generated separators you can switch between a slash, a dot, or a themed SVG chevron in one line — with the SVG recoloured automatically via mask-image so separators always match your text colour. A --sep custom property makes the divider a one-token swap.

Published Updated

Live Demo
Try it

The code

<nav class="bc-26" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#" aria-current="page">Minimal Separators</a></li>
  </ol>
</nav>
.bc-26 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --sep-svg: 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.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --accent: oklch(0.55 0.16 255);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.99 0.003 250);
  place-items: center;
}

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

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

.bc-26 li {
  display: flex;
  align-items: center;
  color: oklch(0.55 0.01 250);
}

.bc-26 li:not(:last-child)::after {
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 10px;
  background: currentColor;
  -webkit-mask: var(--sep-svg) center/contain no-repeat;
  mask: var(--sep-svg) center/contain no-repeat;
  opacity: .5;
}

.bc-26 a {
  font: 500 14px/1 system-ui,sans-serif;
  letter-spacing: .01em;
  color: oklch(0.5 0.02 250);
  text-decoration: none;
  padding: 3px 4px;
  border-radius: 6px;
  transition: color .15s ease;
}

.bc-26 a:hover {
  color: var(--accent);
}

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

.bc-26 li[aria-current="page"] {
  color: oklch(0.3 0.01 250);
}

.bc-26 li[aria-current="page"] a {
  color: oklch(0.3 0.01 250);
  font-weight: 600;
}
/* No JavaScript — decorative separators are a mask-image pseudo-element painted with currentColor, so the SVG chevron matches text colour automatically; swap --sep-svg for slash/dot. */
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: Minimalist CSS Breadcrumb with Custom SVG Separators
Source: https://codefronts.com/navigation/css-breadcrumbs/retro-terminal-path/

The cleanest possible breadcrumb: text links divided by CSS-generated separators you can switch between a slash, a dot, or a themed SVG chevron in one line — with the SVG recoloured automatically via mask-image so separators always match your text colour. A --sep custom property makes the divider a one-token swap.
## HTML
```html
<nav class="bc-26" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#" aria-current="page">Minimal Separators</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-26 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --sep-svg: 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.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --accent: oklch(0.55 0.16 255);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.99 0.003 250);
  place-items: center;
}

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

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

.bc-26 li {
  display: flex;
  align-items: center;
  color: oklch(0.55 0.01 250);
}

.bc-26 li:not(:last-child)::after {
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 10px;
  background: currentColor;
  -webkit-mask: var(--sep-svg) center/contain no-repeat;
  mask: var(--sep-svg) center/contain no-repeat;
  opacity: .5;
}

.bc-26 a {
  font: 500 14px/1 system-ui,sans-serif;
  letter-spacing: .01em;
  color: oklch(0.5 0.02 250);
  text-decoration: none;
  padding: 3px 4px;
  border-radius: 6px;
  transition: color .15s ease;
}

.bc-26 a:hover {
  color: var(--accent);
}

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

.bc-26 li[aria-current="page"] {
  color: oklch(0.3 0.01 250);
}

.bc-26 li[aria-current="page"] a {
  color: oklch(0.3 0.01 250);
  font-weight: 600;
}
```

## JavaScript
```js
/* No JavaScript — decorative separators are a mask-image pseudo-element painted with currentColor, so the SVG chevron matches text colour automatically; swap --sep-svg for slash/dot. */
```

How this works

Separators are injected between crumbs with li:not(:last-child)::after (or the equivalent li + li::before) so they never appear before the first or after the last item, and they live outside the link text — screen readers never read them. The demo exposes a --sep custom property: set it to "/", "•" or leave the glyph and switch to the SVG mode. In SVG mode the separator is a ::after whose background is a chevron data: URI applied through -webkit-mask/mask, with background:currentColor — so the chevron is painted in the crumb's own text colour and re-tints automatically with the theme, no second asset.

The rest is disciplined minimalism: generous letter-spacing, a muted trail colour, a single accent for hover/current, and a comfortable click target. Because everything is a pseudo-element, the HTML stays a clean semantic <ol> of links with nothing decorative inside it — the ideal base to copy into any project and restyle.

Make it yours

  • Switch dividers in one line: --sep-glyph:"›" for chevron, "·" for a mid-dot, "—" for an em dash.
  • For an icon divider, replace the mask data: URI — any single-path SVG works and inherits colour via background:currentColor.
  • Separator spacing is the pseudo-element's margin — one value tunes the whole trail's rhythm.
  • Tighten to a single-line compact bar with font-size:13px and 8px separator margins for dense UIs.

Gotchas — read before shipping

  • Use mask + background:currentColor for coloured SVG separators — an <img> or CSS background-image of a coloured SVG won't follow your text colour.
  • Never put the slash inside the link or a real text node — li + li::before keeps it decorative and out of the accessible name.
  • Include the -webkit-mask prefix; older Safari drops unprefixed masks and the separator vanishes.
  • content strings can't be animated or themed by media query directly — drive the glyph via a custom property so a theme can reassign it.

Browser support

ChromeSafariFirefoxEdge
120+15.4+121+120+

mask-image is the only modern piece (prefixed for Safari); custom-property-driven content and pseudo separators work far back. Degrades to plain glyph separators.

Techniques used in this demo

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

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →