Stepper

Sequential navigation through stages.

html

<nav aria-label="Checkout steps" class="stepper-nav">
  <ol class="stepper stepper--horizontal" style="--accent:#E8A020;">
    <li class="stepper__step is-complete">
      <span class="stepper__marker">1</span>
      <span class="stepper__label">Cart</span>
    </li>
    <li class="stepper__step is-current" aria-current="step">
      <span class="stepper__marker">2</span>
      <span class="stepper__label">Shipping</span>
    </li>
    <li class="stepper__step">
      <span class="stepper__marker">3</span>
      <span class="stepper__label">Payment</span>
    </li>
    <li class="stepper__step">
      <span class="stepper__marker">4</span>
      <span class="stepper__label">Confirm</span>
    </li>
  </ol>
</nav>
<style>
.stepper { display: flex; list-style: none; padding: 0; margin: 0; font: 500 13px system-ui, sans-serif; color: #241430; gap: 24px; }
.stepper--vertical { flex-direction: column; gap: 16px; }
.stepper__step { display: flex; align-items: center; gap: 8px; opacity: .55; }
.stepper__step.is-complete, .stepper__step.is-current { opacity: 1; }
.stepper__marker { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; font-size: 11px; flex: none; }
.stepper__step.is-complete .stepper__marker { background: var(--accent); border-color: var(--accent); color: #241430; }
.stepper__step.is-current .stepper__marker { border-color: var(--accent); color: var(--accent); font-weight: 700; }
</style>

tailwind

<nav aria-label="Checkout steps" class="font-sans text-[13px] text-[#241430]">
  <ol class="stepper-tw stepper-tw--horizontal flex list-none p-0 m-0 gap-6" style="--accent:#E8A020;">
    <li class="flex items-center gap-2">
      <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full text-[11px] font-bold" style="background:#E8A020;border:2px solid #E8A020;color:#241430;">1</span>
      <span>Cart</span>
    </li>
    <li class="flex items-center gap-2" aria-current="step">
      <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full border-2 text-[11px] font-bold" style="border-color:#E8A020;color:#E8A020;">2</span>
      <span class="font-bold">Shipping</span>
    </li>
    <li class="flex items-center gap-2 opacity-55">
      <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full border-2 border-current text-[11px]">3</span>
      <span>Payment</span>
    </li>
    <li class="flex items-center gap-2 opacity-55">
      <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full border-2 border-current text-[11px]">4</span>
      <span>Confirm</span>
    </li>
  </ol>
</nav>
<style>
.stepper-tw--vertical { flex-direction: column; gap: 16px; }
</style>

react

export function Stepper({
  currentLabel = "Shipping",
  accent = "#E8A020",
  orientation = "horizontal",
  showNumbers = true,
}) {
  const marker = { display: "inline-flex", alignItems: "center", justifyContent: "center", width: 22, height: 22, borderRadius: "50%", fontSize: 11, flex: "none" };
  return (
    <nav aria-label="Checkout steps" style={{ fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <ol style={{ display: "flex", flexDirection: orientation === "vertical" ? "column" : "row", listStyle: "none", padding: 0, margin: 0, gap: orientation === "vertical" ? 16 : 24 }}>
        <li style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ ...marker, background: accent, border: "2px solid " + accent, color: "#241430" }}>{showNumbers ? "1" : "✓"}</span>
          <span>Cart</span>
        </li>
        <li aria-current="step" style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ ...marker, border: "2px solid " + accent, color: accent, fontWeight: 700 }}>{showNumbers ? "2" : ""}</span>
          <span style={{ fontWeight: 700 }}>{currentLabel}</span>
        </li>
        <li style={{ display: "flex", alignItems: "center", gap: 8, opacity: .55 }}>
          <span style={{ ...marker, border: "2px solid currentColor" }}>{showNumbers ? "3" : ""}</span>
          <span>Payment</span>
        </li>
        <li style={{ display: "flex", alignItems: "center", gap: 8, opacity: .55 }}>
          <span style={{ ...marker, border: "2px solid currentColor" }}>{showNumbers ? "4" : ""}</span>
          <span>Confirm</span>
        </li>
      </ol>
    </nav>
  );
}