Breadcrumbs
Spring separators, hover lift, and a shimmer on the current segment. Built with Framer Motion and your theme tokens.
Live preview
Trail of clicks · springs between stops · shine on where you land
Install
v0
Ship the registry bundle to v0 and iterate on motion or layout with prompts.
Usage
Minimal example — see tile 05 for the full items contract and packages.
import { Breadcrumbs } from "@/components/ui/breadcrumbs";
import { Home } from "lucide-react";
const items = [
{ label: "Home", href: "/", icon: <Home className="size-3.5" /> },
{ label: "Docs", href: "/docs" },
{ label: "Current page" },
];
export function PageHeader() {
return <Breadcrumbs items={items} />;
}Dependencies
Registry peers and how this component fits your app — each segment is a BreadcrumbItem with label, optional href, and optional icon.
items prop (required)
Array of breadcrumb segments: label (visible text), optional href (links use motion.a; last segment is often current page with no href), optional icon (React node, e.g. a Lucide icon).
className (optional)
Forwarded to the root nav element; use it for alignment, max-width, or spacing in your header or page chrome.
framer-motion
Drives list item layout, separator pop, hover/tap on links, staggered entrance, and the shimmer on the active crumb.
lucide-react
ChevronRight is used between segments. You can pass any icon nodes in items for home or section markers.
Current vs. links
The last item is styled as the current page (no hover scale, pulsing dot, shimmer). Earlier items get accent hover background and lift.
Accessibility
Root nav uses aria-label="breadcrumb" and an ordered list. Ensure hrefs point to real routes and the current page is last.
shadcn registry
Peer dependencies are declared on the registry item so shadcn@latest add pulls framer-motion and lucide-react when needed.