39 CSS Breadcrumbs27 / 39

Pure CSSMIT licensed

Multi-Step Checkout & Form Wizard CSS Breadcrumb Indicator

Breadcrumbs reimagined as a checkout/wizard progress bar: numbered circular step badges (auto-numbered with CSS counters), connecting progress lines that fill for completed steps, and clear done / current / upcoming states — the Cart › Shipping › Payment › Review pattern, all in CSS with no manual numbering.

Published Updated

Live Demo
Try it

The code

<nav class="bc-27" aria-label="Checkout progress">
  <ol>
    <li data-state="done"><span class="bc-27__badge" aria-hidden="true"></span><span class="bc-27__label">Cart</span><span class="bc-27__sr">completed</span></li>
    <li data-state="done"><span class="bc-27__badge" aria-hidden="true"></span><span class="bc-27__label">Shipping</span><span class="bc-27__sr">completed</span></li>
    <li data-state="current" aria-current="step"><span class="bc-27__badge" aria-hidden="true"></span><span class="bc-27__label">Payment</span></li>
    <li data-state="upcoming"><span class="bc-27__badge" aria-hidden="true"></span><span class="bc-27__label">Review</span></li>
  </ol>
</nav>
.bc-27 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.6 0.16 250);
  --done: oklch(0.65 0.14 160);
  --mut: oklch(0.85 0.01 250);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 36px 30px;
  background: oklch(0.98 0.004 250);
  place-items: center;
}

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

.bc-27 ol {
  counter-reset: step;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-27 li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.bc-27 li::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--mut);
  z-index: 0;
}

.bc-27 li:first-child::before {
  display: none;
}

.bc-27 li[data-state="done"]::before,
.bc-27 li[data-state="current"]::before {
  background: var(--done);
}

.bc-27__badge {
  counter-increment: step;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font: 700 14px/1 system-ui,sans-serif;
  background: #fff;
  color: oklch(0.6 0.01 250);
  border: 2px solid var(--mut);
}

.bc-27__badge::after {
  content: counter(step);
}

.bc-27 li[data-state="done"] .bc-27__badge {
  background: var(--done);
  border-color: var(--done);
  color: #fff;
}

.bc-27 li[data-state="done"] .bc-27__badge::after {
  content: "✓";
}

.bc-27 li[data-state="current"] .bc-27__badge {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab,var(--accent) 20%,transparent);
}

.bc-27__label {
  font: 600 13px/1.2 system-ui,sans-serif;
  color: oklch(0.5 0.02 250);
}

.bc-27 li[data-state="current"] .bc-27__label {
  color: oklch(0.3 0.02 250);
}

.bc-27 li[data-state="upcoming"] .bc-27__label {
  color: oklch(0.68 0.01 250);
}

.bc-27__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .bc-27__label {
    font-size: 11.5px;
  }
}
/* No JavaScript — CSS counters auto-number the step badges (content:counter(step)); data-state paints done/current/upcoming and fills the connector lines. */
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: Multi-Step Checkout & Form Wizard CSS Breadcrumb Indicator
Source: https://codefronts.com/navigation/css-breadcrumbs/progress-track/

Breadcrumbs reimagined as a checkout/wizard progress bar: numbered circular step badges (auto-numbered with CSS counters), connecting progress lines that fill for completed steps, and clear done / current / upcoming states — the Cart › Shipping › Payment › Review pattern, all in CSS with no manual numbering.
## HTML
```html
<nav class="bc-27" aria-label="Checkout progress">
  <ol>
    <li data-state="done"><span class="bc-27__badge" aria-hidden="true"></span><span class="bc-27__label">Cart</span><span class="bc-27__sr">completed</span></li>
    <li data-state="done"><span class="bc-27__badge" aria-hidden="true"></span><span class="bc-27__label">Shipping</span><span class="bc-27__sr">completed</span></li>
    <li data-state="current" aria-current="step"><span class="bc-27__badge" aria-hidden="true"></span><span class="bc-27__label">Payment</span></li>
    <li data-state="upcoming"><span class="bc-27__badge" aria-hidden="true"></span><span class="bc-27__label">Review</span></li>
  </ol>
</nav>
```
## CSS
```css
.bc-27 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.6 0.16 250);
  --done: oklch(0.65 0.14 160);
  --mut: oklch(0.85 0.01 250);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 36px 30px;
  background: oklch(0.98 0.004 250);
  place-items: center;
}

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

.bc-27 ol {
  counter-reset: step;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-27 li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.bc-27 li::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--mut);
  z-index: 0;
}

.bc-27 li:first-child::before {
  display: none;
}

.bc-27 li[data-state="done"]::before,
.bc-27 li[data-state="current"]::before {
  background: var(--done);
}

.bc-27__badge {
  counter-increment: step;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font: 700 14px/1 system-ui,sans-serif;
  background: #fff;
  color: oklch(0.6 0.01 250);
  border: 2px solid var(--mut);
}

.bc-27__badge::after {
  content: counter(step);
}

.bc-27 li[data-state="done"] .bc-27__badge {
  background: var(--done);
  border-color: var(--done);
  color: #fff;
}

.bc-27 li[data-state="done"] .bc-27__badge::after {
  content: "✓";
}

.bc-27 li[data-state="current"] .bc-27__badge {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab,var(--accent) 20%,transparent);
}

.bc-27__label {
  font: 600 13px/1.2 system-ui,sans-serif;
  color: oklch(0.5 0.02 250);
}

.bc-27 li[data-state="current"] .bc-27__label {
  color: oklch(0.3 0.02 250);
}

.bc-27 li[data-state="upcoming"] .bc-27__label {
  color: oklch(0.68 0.01 250);
}

.bc-27__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .bc-27__label {
    font-size: 11.5px;
  }
}
```

## JavaScript
```js
/* No JavaScript — CSS counters auto-number the step badges (content:counter(step)); data-state paints done/current/upcoming and fills the connector lines. */
```

How this works

Step numbers are generated, not typed: the <ol> sets counter-reset:step and each step's badge does counter-increment:step with content:counter(step) — so reordering or inserting steps renumbers automatically. State is carried by a data-state attribute (done/current/upcoming): completed badges swap the number for a check via content:"✓", the current badge gets the accent ring, upcoming badges stay muted.

The connecting track is a ::before line behind each step; completed steps paint it in the accent colour, so the filled portion reads as progress. Everything is laid out with flexbox and equal flex:1 steps, so the bar stretches full-width and the connectors always meet the badges. Accessibility: the current step carries aria-current="step", done steps get a visually-hidden "completed" label, and the trail is a real <ol> so the sequence is announced in order.

Make it yours

  • Swap circular badges for pills, or add a label line under each number — the flex column per step has room.
  • Animate the connector fill on step change with a transform:scaleX() transition for a satisfying progress sweep.
  • Vertical wizard: switch the flex direction to column and rotate the connectors — same counter/state logic.
  • Recolour done/current/upcoming via three tokens; the check glyph and ring follow the accent.

Gotchas — read before shipping

  • CSS counters render text but aren't read as a list position by all screen readers — keep the real <ol> and add visually-hidden state text ("Step 2 of 4, current").
  • content:counter(step) only works on a pseudo-element with an incrementing counter in scope — reset on the list, increment on the item.
  • Don't convey step state by colour alone — the check glyph, ring, and aria-current together cover colour-blind and AT users.
  • Equal flex:1 steps can squeeze labels on mobile; allow wrapping to a vertical stepper under a breakpoint.

Browser support

ChromeSafariFirefoxEdge
111+16.2+113+111+

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

CSS counters and flexbox are universally supported; oklch() styles the palette only. This pattern is safe on any production site today.

Techniques used in this demo

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

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →