Pure CSSMIT licensed

Clean Line-Separator Minimalist CSS Breadcrumbs

The most restrained trail in the set: crumbs divided by thin vertical hairline rules with generous whitespace, low-profile muted type, and a single hairline that brightens under the active crumb. Editorial, calm, and perfect for content-heavy sites where the breadcrumb should whisper, not shout.

Published May 6, 2026Updated Jul 22, 2026

Live Demo

Try it

The code

<nav class="bc-30" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Magazine</a></li>
    <li><a href="#">Essays</a></li>
    <li><a href="#" aria-current="page">On Slow Design</a></li>
  </ol>
</nav>

<nav class="bc-30" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Magazine</a></li>
    <li><a href="#">Essays</a></li>
    <li><a href="#" aria-current="page">On Slow Design</a></li>
  </ol>
</nav>

.bc-30 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 32px;
  background: oklch(0.99 0.002 90);
  place-items: center;
}

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

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

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

.bc-30 li:not(:last-child)::after {
  content: "";
  height: 14px;
  margin-inline: 16px;
  border-inline-end: 1px solid oklch(0.82 0.005 90);
}

.bc-30 a {
  font: 400 13.5px/1 system-ui,sans-serif;
  letter-spacing: .015em;
  color: oklch(0.52 0.006 90);
  text-decoration: none;
  padding: 2px 1px;
  transition: color .15s ease;
}

.bc-30 a:hover {
  color: oklch(0.3 0.01 90);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.bc-30 a:focus-visible {
  outline: 2px solid oklch(0.45 0.03 90);
  outline-offset: 3px;
}

.bc-30 li[aria-current="page"] a {
  color: oklch(0.2 0.008 90);
  font-weight: 500;
}

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

.bc-30 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 32px;
  background: oklch(0.99 0.002 90);
  place-items: center;
}

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

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

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

.bc-30 li:not(:last-child)::after {
  content: "";
  height: 14px;
  margin-inline: 16px;
  border-inline-end: 1px solid oklch(0.82 0.005 90);
}

.bc-30 a {
  font: 400 13.5px/1 system-ui,sans-serif;
  letter-spacing: .015em;
  color: oklch(0.52 0.006 90);
  text-decoration: none;
  padding: 2px 1px;
  transition: color .15s ease;
}

.bc-30 a:hover {
  color: oklch(0.3 0.01 90);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.bc-30 a:focus-visible {
  outline: 2px solid oklch(0.45 0.03 90);
  outline-offset: 3px;
}

.bc-30 li[aria-current="page"] a {
  color: oklch(0.2 0.008 90);
  font-weight: 500;
}

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

/* No JavaScript — separators are 1px logical border hairlines (border-inline-end) with generous margin-inline; quiet muted type keeps the trail subordinate to page content. */

/* No JavaScript — separators are 1px logical border hairlines (border-inline-end) with generous margin-inline; quiet muted type keeps the trail subordinate to page content. */

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: Clean Line-Separator Minimalist CSS Breadcrumbs
Source: https://codefronts.com/navigation/css-breadcrumbs/bordered-box/

The most restrained trail in the set: crumbs divided by thin vertical hairline rules with generous whitespace, low-profile muted type, and a single hairline that brightens under the active crumb. Editorial, calm, and perfect for content-heavy sites where the breadcrumb should whisper, not shout.
## HTML
```html
<nav class="bc-30" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Magazine</a></li>
    <li><a href="#">Essays</a></li>
    <li><a href="#" aria-current="page">On Slow Design</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-30 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 32px;
  background: oklch(0.99 0.002 90);
  place-items: center;
}

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

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

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

.bc-30 li:not(:last-child)::after {
  content: "";
  height: 14px;
  margin-inline: 16px;
  border-inline-end: 1px solid oklch(0.82 0.005 90);
}

.bc-30 a {
  font: 400 13.5px/1 system-ui,sans-serif;
  letter-spacing: .015em;
  color: oklch(0.52 0.006 90);
  text-decoration: none;
  padding: 2px 1px;
  transition: color .15s ease;
}

.bc-30 a:hover {
  color: oklch(0.3 0.01 90);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.bc-30 a:focus-visible {
  outline: 2px solid oklch(0.45 0.03 90);
  outline-offset: 3px;
}

.bc-30 li[aria-current="page"] a {
  color: oklch(0.2 0.008 90);
  font-weight: 500;
}

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

## JavaScript
```js
/* No JavaScript — separators are 1px logical border hairlines (border-inline-end) with generous margin-inline; quiet muted type keeps the trail subordinate to page content. */
```

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: Clean Line-Separator Minimalist CSS Breadcrumbs
Source: https://codefronts.com/navigation/css-breadcrumbs/bordered-box/

The most restrained trail in the set: crumbs divided by thin vertical hairline rules with generous whitespace, low-profile muted type, and a single hairline that brightens under the active crumb. Editorial, calm, and perfect for content-heavy sites where the breadcrumb should whisper, not shout.
## HTML
```html
<nav class="bc-30" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Magazine</a></li>
    <li><a href="#">Essays</a></li>
    <li><a href="#" aria-current="page">On Slow Design</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-30 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 32px;
  background: oklch(0.99 0.002 90);
  place-items: center;
}

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

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

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

.bc-30 li:not(:last-child)::after {
  content: "";
  height: 14px;
  margin-inline: 16px;
  border-inline-end: 1px solid oklch(0.82 0.005 90);
}

.bc-30 a {
  font: 400 13.5px/1 system-ui,sans-serif;
  letter-spacing: .015em;
  color: oklch(0.52 0.006 90);
  text-decoration: none;
  padding: 2px 1px;
  transition: color .15s ease;
}

.bc-30 a:hover {
  color: oklch(0.3 0.01 90);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.bc-30 a:focus-visible {
  outline: 2px solid oklch(0.45 0.03 90);
  outline-offset: 3px;
}

.bc-30 li[aria-current="page"] a {
  color: oklch(0.2 0.008 90);
  font-weight: 500;
}

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

## JavaScript
```js
/* No JavaScript — separators are 1px logical border hairlines (border-inline-end) with generous margin-inline; quiet muted type keeps the trail subordinate to page content. */
```

How this works

Instead of glyphs, separators are thin vertical rules: li:not(:last-child)::after renders a 1px-wide, ~14px-tall element via border-inline-end (a hairline) with comfortable margins. Using a border rather than a character means the divider is crisp at any zoom, aligns to the text baseline reliably, and inherits colour cleanly. The type is deliberately quiet — a muted neutral at a normal weight, tight letter-spacing — so the trail recedes beneath the page's real content.

The only flourish is restraint's version of emphasis: hovering a crumb subtly darkens it and the current page sits at full ink weight, while the hairline beside the active area brightens a touch. Everything is logical-property based (border-inline-end, margin-inline) so RTL flips for free. This is the trail to reach for on documentation, editorial, and long-form pages where a loud breadcrumb would compete with the reading experience.

Make it yours

Hairline weight/height: 1px × 14px is a whisper; 1px × 20px or a 2px rule reads slightly stronger.
Swap the vertical rule for a short diagonal by rotating the pseudo-element 12deg — a subtle editorial touch.
Tighten or open the rhythm via the pseudo-element's margin-inline — the single spacing dial.
For a byline feel, set the whole trail in the body serif at 13px with wider letter-spacing.

Gotchas — read before shipping

Hairline dividers can disappear on high-DPI at exactly 1px — use border-inline-end:1px solid (snaps to device pixel) rather than a scaled width.
Keep the muted type above 4.5:1 for the link text itself — 'quiet' must not mean illegible; muted ≠ low-contrast.
Logical borders (border-inline-end) are what make RTL work — don't hardcode border-right.
Don't let the divider hug the text — enough margin-inline is what makes minimalism read as intentional, not cramped.

Browser support

Chrome	Safari	Firefox	Edge
111+	15.4+	113+	111+

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

Logical properties and border pseudo-separators are universally supported. oklch() only sets the neutral palette. Safe anywhere.

Techniques used in this demo

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