Installation
Usage
import BreadcrumbIcon from "@/components/ruixen/breadcrumb-icon";
import { Home, Folder, File } from "lucide-react";
const items = [
{ label: "Home", href: "/", icon: Home },
{ label: "Documents", href: "/documents", icon: Folder },
{ label: "Report.pdf", icon: File },
];
export default function MyBreadcrumb() {
return <BreadcrumbIcon items={items} showHomeIcon={false} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbIconItem[] | - | Array of breadcrumb items |
showHomeIcon | boolean | true | Add home icon to first item |
iconOnly | boolean | false | Show only icons without labels |
className | string | - | Additional CSS classes |
BreadcrumbIconItem
| Property | Type | Description |
|---|---|---|
label | string | Display text for the item |
href | string | Optional link URL |
icon | LucideIcon | Optional custom icon |
Features
- Magnetic Pill: A soft rounded highlight (
bg-foreground/[0.06]) that smoothly slides and resizes to wrap whichever item you hover — the highlight comes to you, items stay perfectly still - Icon Spring-Bounce: The hovered item's icon scales to 1.18x with spring overshoot
cubic-bezier(0.34, 1.56, 0.64, 1)— tactile, not decorative - First-Hover Fade-In: On initial hover the pill fades in at position; subsequent hovers slide with spring overshoot
cubic-bezier(0.33, 1.52, 0.58, 1) - Minimal Separators: Ultra-light 12px chevron SVGs at 30% opacity — wayfinding without competing with the pill
- Accessibility:
aria-current="page"on active item,aria-hiddenseparators, semanticnav+olstructure