# Breadcrumb Icons Chevrons — React Breadcrumb Component

> An icon breadcrumb that assembles itself on mount, each crumb sliding out from behind its chevron, with a hover highlight that glides between items.

- Category: [Breadcrumbs](https://pixelpapa.com/components/breadcrumbs.md)
- Tags: breadcrumb, icons, stagger, hover, navigation
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/breadcrumbs/breadcrumb-icons-chevrons

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/breadcrumb-icons-chevrons.json"
```

The file is written to `components/pixelpapa/breadcrumb-icons-chevrons.tsx`. To install manually, run `npm install lucide-react motion` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { Box, ChevronRight, FolderOpen, House, RotateCcw, Settings, Users, type LucideIcon } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { useId, useState } from "react";
import { cn } from "@/lib/utils";

export type IconCrumb = { label: string; icon: LucideIcon; href?: string };

type IconBreadcrumbProps = {
  items: IconCrumb[];
  /** `contained` wraps the trail in a bordered bar. */
  variant?: "plain" | "contained";
  className?: string;
};

export function IconBreadcrumb({ items, variant = "plain", className }: IconBreadcrumbProps) {
  const uid = useId();
  const reduce = useReducedMotion();
  const [hovered, setHovered] = useState<number | null>(null);
  const ease = [0.22, 1, 0.36, 1] as const;

  return (
    <nav aria-label="Breadcrumb" className={className}>
      <motion.ol
        initial={reduce ? false : "hidden"}
        animate="shown"
        transition={{ staggerChildren: 0.11, delayChildren: 0.1 }}
        onPointerLeave={() => setHovered(null)}
        className={cn(
          "inline-flex items-center text-sm",
          variant === "contained" && "rounded-full border border-border bg-card p-1 shadow-xs",
        )}
      >
        {items.map(({ label, icon: Icon, href }, i) => {
          const current = i === items.length - 1;
          return (
            <motion.li key={label} variants={{ hidden: {}, shown: {} }} className="flex items-center">
              {i > 0 && (
                <motion.span
                  aria-hidden
                  variants={{ hidden: { opacity: 0, scale: 0.4, rotate: -90 }, shown: { opacity: 1, scale: 1, rotate: 0 } }}
                  transition={{ type: "spring", stiffness: 420, damping: 22 }}
                  className="mx-0.5 text-muted-foreground/50"
                >
                  <ChevronRight className="size-4" />
                </motion.span>
              )}
              <motion.a
                href={href ?? "#"}
                aria-current={current ? "page" : undefined}
                variants={{ hidden: { opacity: 0, x: -14, filter: "blur(4px)" }, shown: { opacity: 1, x: 0, filter: "blur(0px)" } }}
                transition={{ duration: 0.45, ease }}
                onPointerEnter={() => setHovered(i)}
                onFocus={() => setHovered(i)}
                onBlur={() => setHovered(null)}
                className={cn(
                  "group relative flex h-8 items-center gap-1.5 rounded-full px-2.5 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/60",
                  current ? "font-medium text-primary" : "text-muted-foreground hover:text-foreground",
                )}
              >
                {current && <span className="absolute inset-0 rounded-full bg-primary/10" />}
                {hovered === i && !current && (
                  <motion.span
                    layoutId={`breadcrumb-icons-chevrons-${uid}`}
                    transition={{ type: "spring", stiffness: 480, damping: 36 }}
                    className="absolute inset-0 rounded-full bg-muted"
                  />
                )}
                <Icon className="relative size-4 transition-transform duration-300 group-hover:-rotate-6 group-hover:scale-110" />
                <span className="relative">{label}</span>
              </motion.a>
            </motion.li>
          );
        })}
      </motion.ol>
    </nav>
  );
}

const trail: IconCrumb[] = [
  { label: "Home", icon: House },
  { label: "Projects", icon: FolderOpen },
  { label: "Fleet dashboard", icon: Box },
  { label: "Members", icon: Users },
];

const settingsTrail: IconCrumb[] = [
  { label: "Home", icon: House },
  { label: "Settings", icon: Settings },
  { label: "Team", icon: Users },
];

export default function BreadcrumbIconsChevronsDemo() {
  const [run, setRun] = useState(0);

  return (
    <div className="flex flex-col items-center gap-7">
      <IconBreadcrumb key={`a-${run}`} items={trail} />
      <IconBreadcrumb key={`b-${run}`} items={settingsTrail} variant="contained" />
      <button
        type="button"
        onClick={() => setRun((r) => r + 1)}
        className="inline-flex h-8 items-center gap-1.5 rounded-full px-3 text-xs font-medium text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60"
      >
        <RotateCcw className="size-3.5" /> Replay entrance
      </button>
    </div>
  );
}
```

## AI prompt

```text
Add the "Breadcrumb Icons Chevrons" component from PixelPapa UI to this project.

What it is: An icon breadcrumb that assembles itself on mount, each crumb sliding out from behind its chevron, with a hover highlight that glides between items.
Category: Breadcrumbs. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/breadcrumb-icons-chevrons.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/breadcrumb-icons-chevrons.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/breadcrumb-icons-chevrons" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More breadcrumbs

- [Breadcrumb Collapsed Dropdown](https://pixelpapa.com/components/breadcrumbs/breadcrumb-collapsed-dropdown.md): A breadcrumb that folds its middle levels into an ellipsis button; the menu springs open and lists the hidden levels as an indented staircase.
- [Breadcrumb Path Editable](https://pixelpapa.com/components/breadcrumbs/breadcrumb-path-editable.md) (Pro): A file-explorer breadcrumb: click the bar and the crumbs turn into a typed path; Enter navigates, a path that does not exist shakes, Escape restores the crumbs.
- [Breadcrumb Steps Progress](https://pixelpapa.com/components/breadcrumbs/breadcrumb-steps-progress.md): A breadcrumb of interlocking arrow segments for linear flows: colour sweeps into the next arrow as you advance and finished steps swap their number for a check.