proNew235 lines · framer-motion

Breadcrumb Steps Navbar

A nav bar that shows exactly how far through checkout you are. A nav bar whose second row is a breadcrumb-style multi-step progress indicator with connecting lines, a filled accent current step and checkmarks on completed steps, driven live by a `currentStep` prop.

Use it for: A checkout, onboarding wizard or multi-page application flow where the user needs a persistent sense of progress across steps like Cart, Shipping, Payment and Done.
Themes: Light + dark
License: Commercial use

Live

Cart
2
Shipping
3
Payment
4
Done

Step 2 of 4

Shipping details

Full name

Address line

City and postal code

Summary

Total

Continue

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width nav bar whose second row is a breadcrumb-style multi-step
 * progress indicator: connecting lines, a filled/accent current step, and
 * checkmarks on completed steps. `currentStep` drives it live.
 */

export interface NavLink {
  label: string;
  href?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→currentStep is clamped between 1 and the number of steps and drives which circles render as done (checkmark, filled signal colour), active (outlined signal colour, slightly scaled up) or upcoming (muted border).
→The connecting line between two steps fills from 0% to 100% width with a short eased transition whenever a step to its left becomes complete.
→The active step's circle gets a subtle scale-up spring on change; this is skipped entirely under prefers-reduced-motion, leaving a static highlighted frame.
→A separate hamburger button toggles a collapsible mobile link list, independent of the step indicator.
→The page content below the steps echoes the current step number and title in its own heading, so the block reads as a believable in-context checkout page rather than an isolated widget. showBackdrop can turn it off to render just the bar and step row.

Accessibility

✓The step list is an ordered list (`<ol>`) with `aria-label="Checkout progress"`; the active item carries `aria-current="step"`.
✓A visually hidden `aria-live="polite"` region announces "Step N of M: <label>" whenever `currentStep` changes, so screen-reader users get the same update sighted users see.
✓Completed-step checkmarks are decorative SVG (`aria-hidden`); the step label text itself conveys status via visible colour and weight, not colour alone (checkmark vs number vs plain).
✓All nav links and buttons have visible text or `aria-label`, and the mobile menu button exposes `aria-expanded`.
✓Honours prefers-reduced-motion.