Installation
Usage
import BreadcrumbSeparator from "@/components/ruixen/breadcrumb-separator";
const items = [
{ label: "Home", href: "/" },
{ label: "Products", href: "/products" },
{ label: "Electronics" },
];
export default function MyBreadcrumb() {
return <BreadcrumbSeparator items={items} separator="slash" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | - | Array of breadcrumb items |
separator | "chevron" | "slash" | "dot" | "arrow" | "dash" | "chevron" | Separator style |
className | string | - | Additional CSS classes |
BreadcrumbItem
| Property | Type | Description |
|---|---|---|
label | string | Display text for the item |
href | string | Optional link URL |
Separator Styles
| Style | Preview |
|---|---|
chevron | > |
slash | / |
dot | · |
arrow | → |
dash | — |
Features
- Hover Cascade: Items beyond the hovered level fade to 40% opacity and shift right 2px — visually "popping" them from the navigation stack
- Separator Spring: The separator adjacent to the hovered item scales up (1.2x) with a spring overshoot curve
cubic-bezier(0.34, 1.56, 0.64, 1) - Custom SVG Chevron: Hand-tuned SVG with 1.5px stroke weight — lighter and more precise than icon library chevrons
- Smooth Cascade Easing: Item fade uses
cubic-bezier(0.16, 1, 0.3, 1)— smooth ease-out without overshoot, distinct from the springy separator - Accessibility:
aria-current="page"on the active item,aria-hiddenon separators, semanticnav+olstructure