Pill-Shape Badge CSS Breadcrumb Bar UI

Each crumb is a rounded capsule with a soft tinted background and comfortable gap spacing — the friendly 'pill' breadcrumb common in modern dashboards and mobile apps. Full 9999px radius, subtle hover fill lift, and an accent-filled current pill, laid out with flex + gap so it wraps cleanly.

Live DemoUpdated Jul 22, 2026

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-29" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Design</a></li>
    <li><a href="#" aria-current="page">Tokens</a></li>
  </ol>
</nav>

<nav class="bc-29" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Design</a></li>
    <li><a href="#" aria-current="page">Tokens</a></li>
  </ol>
</nav>

.bc-29 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.58 0.16 285);
  --surface: oklch(0.98 0.004 285);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: var(--surface);
  place-items: center;
}

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

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

.bc-29 li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bc-29 li:not(:last-child)::after {
  content: "›";
  color: oklch(0.7 0.02 285);
  font-size: 14px;
}

.bc-29 a {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 9999px;
  font: 600 13px/1 system-ui,sans-serif;
  color: oklch(0.42 0.08 285);
  text-decoration: none;
  background: color-mix(in oklab,var(--accent) 10%,var(--surface));
  transition: background-color .18s ease,color .18s ease;
}

.bc-29 a:hover {
  background: color-mix(in oklab,var(--accent) 20%,var(--surface));
  color: oklch(0.32 0.12 285);
}

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

.bc-29 li[aria-current="page"] a {
  background: var(--accent);
  color: #fff;
}

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

.bc-29 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.58 0.16 285);
  --surface: oklch(0.98 0.004 285);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: var(--surface);
  place-items: center;
}

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

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

.bc-29 li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bc-29 li:not(:last-child)::after {
  content: "›";
  color: oklch(0.7 0.02 285);
  font-size: 14px;
}

.bc-29 a {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 9999px;
  font: 600 13px/1 system-ui,sans-serif;
  color: oklch(0.42 0.08 285);
  text-decoration: none;
  background: color-mix(in oklab,var(--accent) 10%,var(--surface));
  transition: background-color .18s ease,color .18s ease;
}

.bc-29 a:hover {
  background: color-mix(in oklab,var(--accent) 20%,var(--surface));
  color: oklch(0.32 0.12 285);
}

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

.bc-29 li[aria-current="page"] a {
  background: var(--accent);
  color: #fff;
}

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

/* No JavaScript — each crumb is a 9999px pill tinted with color-mix(); flex + gap keeps even spacing and clean wrapping, the current page is a solid accent pill. */

/* No JavaScript — each crumb is a 9999px pill tinted with color-mix(); flex + gap keeps even spacing and clean wrapping, the current page is a solid accent pill. */

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: Pill-Shape Badge CSS Breadcrumb Bar UI
Source: https://codefronts.com/navigation/css-breadcrumbs/pill-breadcrumbs/

Each crumb is a rounded capsule with a soft tinted background and comfortable gap spacing — the friendly 'pill' breadcrumb common in modern dashboards and mobile apps. Full 9999px radius, subtle hover fill lift, and an accent-filled current pill, laid out with flex + gap so it wraps cleanly.
## HTML
```html
<nav class="bc-29" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Design</a></li>
    <li><a href="#" aria-current="page">Tokens</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-29 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.58 0.16 285);
  --surface: oklch(0.98 0.004 285);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: var(--surface);
  place-items: center;
}

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

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

.bc-29 li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bc-29 li:not(:last-child)::after {
  content: "›";
  color: oklch(0.7 0.02 285);
  font-size: 14px;
}

.bc-29 a {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 9999px;
  font: 600 13px/1 system-ui,sans-serif;
  color: oklch(0.42 0.08 285);
  text-decoration: none;
  background: color-mix(in oklab,var(--accent) 10%,var(--surface));
  transition: background-color .18s ease,color .18s ease;
}

.bc-29 a:hover {
  background: color-mix(in oklab,var(--accent) 20%,var(--surface));
  color: oklch(0.32 0.12 285);
}

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

.bc-29 li[aria-current="page"] a {
  background: var(--accent);
  color: #fff;
}

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

## JavaScript
```js
/* No JavaScript — each crumb is a 9999px pill tinted with color-mix(); flex + gap keeps even spacing and clean wrapping, the current page is a solid accent pill. */
```

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: Pill-Shape Badge CSS Breadcrumb Bar UI
Source: https://codefronts.com/navigation/css-breadcrumbs/pill-breadcrumbs/

Each crumb is a rounded capsule with a soft tinted background and comfortable gap spacing — the friendly 'pill' breadcrumb common in modern dashboards and mobile apps. Full 9999px radius, subtle hover fill lift, and an accent-filled current pill, laid out with flex + gap so it wraps cleanly.
## HTML
```html
<nav class="bc-29" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Design</a></li>
    <li><a href="#" aria-current="page">Tokens</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-29 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.58 0.16 285);
  --surface: oklch(0.98 0.004 285);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: var(--surface);
  place-items: center;
}

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

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

.bc-29 li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bc-29 li:not(:last-child)::after {
  content: "›";
  color: oklch(0.7 0.02 285);
  font-size: 14px;
}

.bc-29 a {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 9999px;
  font: 600 13px/1 system-ui,sans-serif;
  color: oklch(0.42 0.08 285);
  text-decoration: none;
  background: color-mix(in oklab,var(--accent) 10%,var(--surface));
  transition: background-color .18s ease,color .18s ease;
}

.bc-29 a:hover {
  background: color-mix(in oklab,var(--accent) 20%,var(--surface));
  color: oklch(0.32 0.12 285);
}

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

.bc-29 li[aria-current="page"] a {
  background: var(--accent);
  color: #fff;
}

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

## JavaScript
```js
/* No JavaScript — each crumb is a 9999px pill tinted with color-mix(); flex + gap keeps even spacing and clean wrapping, the current page is a solid accent pill. */
```

How this works

Every crumb is a pill: border-radius:9999px, a faint tinted fill (color-mix() of the accent into the surface), and generous horizontal padding for a tappable 44px-ish target. The bar uses display:flex;gap:8px;flex-wrap:wrap — no negative margins, no overlap — so pills keep even spacing and wrap onto a second line intact on mobile. Separators are optional here; the pill shapes and gap already communicate discrete steps, so the demo uses a small muted chevron between pills for direction without clutter.

Hover deepens the pill's fill and nudges the text darker; the current page is a solid accent pill with white text, reading as the clear endpoint. Because pills are self-contained shapes, this pattern is the most robust for wrapping, RTL, and touch of any in the set — and the friendliest. Focus rings sit cleanly outside the pill (no clip-path here), so accessibility is straightforward.

Make it yours

Tint per level: give each pill a slightly stronger color-mix() percentage to imply depth.
Drop the chevrons entirely for a pure token row, or keep them for explicit direction.
Add a leading icon inside the first pill (home) — the capsule has room and the radius frames it nicely.
Size variants: a compact 28px-tall pill for dense tables, a 40px pill for touch-first mobile.

Gotchas — read before shipping

gap is the spacing mechanism — don't add per-pill margins on top, or wrapping produces uneven rows.
Ensure the current accent pill's white text clears contrast on your accent (oklch lightness ≤ 0.62 for white text).
If you keep chevron separators, they must sit in the gap flow as li::before, not inside pills, so wrapping doesn't orphan a chevron.
Full-radius pills can look like buttons — pair with aria-current so the current 'button-looking' pill is announced as the page, not an action.

Browser support

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

color-mix() (2023) is the only modern dependency and only tints the fills; the layout works everywhere. Swap color-mix() for static tints to go fully universal.

Techniques used in this demo

color-mix()MDN ↗place-items / place-contentMDN ↗:focus-visibleMDN ↗