# Progress Breadcrumb

> A breadcrumb with a fill that tracks how far a user has moved. Shows completion across multi step forms, checkout, and guided account onboarding.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/components-breadcrumbs-progress-breadcrumb).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/components-breadcrumbs-progress-breadcrumb
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/components-breadcrumbs-progress-breadcrumb-light-2d63a698a2303278.png
- Registry item: https://www.shadcn-ui-blocks.com/r/components-breadcrumbs-progress-breadcrumb.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/components-breadcrumbs-progress-breadcrumb.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`, `radix-ui`

## Files

### `components/blocks/components/breadcrumbs/progress-breadcrumb.tsx`

```tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { Check } from 'lucide-react';

export default function ProgressBreadcrumb() {
  // In a real application, this would be dynamic based on the current step
  const currentStep = 3;
  const steps = [
    { id: 1, name: 'Cart', href: '#' },
    { id: 2, name: 'Shipping', href: '#' },
    { id: 3, name: 'Payment', href: '#' },
    { id: 4, name: 'Confirmation', href: '#' },
  ];

  return (
    <Breadcrumb className="p-6">
      <BreadcrumbList className="flex-wrap justify-center">
        {steps.map((step, index) => (
          <div key={step.id} className="flex items-center">
            <BreadcrumbItem>
              {step.id < currentStep ? (
                <BreadcrumbLink
                  href={step.href}
                  className={`flex items-center gap-2 ${
                    step.id < currentStep ? 'text-primary' : ''
                  }`}
                >
                  <span className="bg-primary text-primary-foreground flex h-6 w-6 items-center justify-center rounded-full text-xs">
                    <Check className="h-3 w-3" />
                  </span>
                  <span>{step.name}</span>
                </BreadcrumbLink>
              ) : step.id === currentStep ? (
                <BreadcrumbPage className="flex items-center gap-2 font-medium">
                  <span className="bg-primary text-primary-foreground flex h-6 w-6 items-center justify-center rounded-full text-xs">
                    {step.id}
                  </span>
                  <span>{step.name}</span>
                </BreadcrumbPage>
              ) : (
                <BreadcrumbLink
                  href={step.href}
                  className="text-muted-foreground flex items-center gap-2"
                >
                  <span className="bg-muted text-muted-foreground flex h-6 w-6 items-center justify-center rounded-full text-xs">
                    {step.id}
                  </span>
                  <span>{step.name}</span>
                </BreadcrumbLink>
              )}
            </BreadcrumbItem>

            {index < steps.length - 1 && (
              <BreadcrumbSeparator className="text-muted-foreground mx-2">
                <div className="bg-muted-foreground/30 h-px w-8"></div>
              </BreadcrumbSeparator>
            )}
          </div>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  );
}
```

### `components/ui/breadcrumb.tsx`

```tsx
import * as React from "react"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"

function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
  return (
    <nav
      aria-label="breadcrumb"
      data-slot="breadcrumb"
      className={cn(className)}
      {...props}
    />
  )
}

function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
        className
      )}
      {...props}
    />
  )
}

function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn("inline-flex items-center gap-1.5", className)}
      {...props}
    />
  )
}

function BreadcrumbLink({
  asChild,
  className,
  ...props
}: React.ComponentProps<"a"> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot.Root : "a"

  return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    />
  )
}

function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn("font-normal text-foreground", className)}
      {...props}
    />
  )
}

function BreadcrumbSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn("[&>svg]:size-3.5", className)}
      {...props}
    >
      {children ?? (
        <ChevronRightIcon />
      )}
    </li>
  )
}

function BreadcrumbEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn(
        "flex size-5 items-center justify-center [&>svg]:size-4",
        className
      )}
      {...props}
    >
      <MoreHorizontalIcon
      />
      <span className="sr-only">More</span>
    </span>
  )
}

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
```