Installation
Usage
import BreadcrumbDropdown from "@/components/ruixen/breadcrumb-dropdown";
const items = [
{ label: "Home", href: "/" },
{ label: "Products", href: "/products" },
{ label: "Electronics", href: "/products/electronics" },
{ label: "Computers", href: "/products/electronics/computers" },
{ label: "Laptops", href: "/products/electronics/computers/laptops" },
{ label: "Gaming Laptops" },
];
export default function MyBreadcrumb() {
return <BreadcrumbDropdown items={items} maxVisible={3} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbDropdownItem[] | - | Array of breadcrumb items |
maxVisible | number | 3 | Max items before collapsing |
className | string | - | Additional CSS classes |
BreadcrumbDropdownItem
| Property | Type | Description |
|---|---|---|
label | string | Display text for the item |
href | string | Optional link URL |
Features
- Inline Expand: Hidden path segments unfold directly within the breadcrumb flow — no floating dropdown, no popover, everything stays in the document
- Staggered Reveal: Each hidden item slides in from the left (
translateX(-8px)to0) with 50ms stagger between items — choreographed, not chaotic - Trigger Morph: The
···trigger crossfades to a—dash when expanded, using scale + rotate animation for a smooth icon transition - Instant Collapse: Clicking the dash snaps the path closed — the expand is the choreographed moment, the collapse is utility
- Material Deceleration: Uses
cubic-bezier(0.0, 0.0, 0.2, 1)— no spring overshoot. The stagger choreography provides the motion interest - Accessibility:
aria-expandedon trigger,aria-current="page"on active item,aria-hiddenseparators, semanticnav+olstructure