127 Components
Magnetic Breadcrumb
NavigationHierarchical breadcrumb navigation trail with a spring-projected hover capsule and subtle vertical lift across path segments.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/magnetic-breadcrumb.json"
Props
TypeScript props supported by <MagneticBreadcrumb />.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BreadcrumbSegment[] | — | Ordered array of breadcrumb path segments with id and label. |
| stiffness | number | 380 | Hooke's Law spring stiffness for the sliding hover capsule. |
| damping | number | 26 | Spring damping coefficient controlling capsule oscillation. |
| onSelect | (item: BreadcrumbItem) => void | — | Callback fired when a breadcrumb node is clicked |
Key Features
- Shared layoutId hover pill that glides smoothly between path segments using Hooke's Law springs.
- Instance-scoped layout IDs via React useId for multi-instance page safety.
- Semantic ordered list structure with active segment switching.
Keyboard & Accessibility
- Wraps an ordered list (<ol>) inside a <nav aria-label='Breadcrumb'> landmark.
- Marks the active path segment with aria-current='page' and separators with aria-hidden='true'.
- Disables vertical lift and pill glide animations when prefers-reduced-motion is enabled.