Classic Breadcrumbs
Foundational breadcrumb collection — slash, chevron, dot separators, pill and glassy chip styles, arrow ribbon, numbered steps, icon-prefix, back link, and floating frosted-glass breadcrumb. 10+ variants.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for app/dashboard backgrounds, light for white-background pages. |
| accentColor | string | "#6366f1" | Applied to active crumb text, hover underlines, arrow fill, numbered circle, pill active bg. |
| separator | "slash" | "chevron" | "dot" | "slash" | Highlights the matching separator variant with an accent ring and uses that character across all separator-style breadcrumbs. |
| size | "sm" | "md" | "lg" | "md" | Scales all breadcrumb text — sm=text-xs, md=text-sm, lg=text-base. |
When to Use
Use when you need a versatile breadcrumb foundation — pick any variant as a starting point. SlashBreadcrumb and ChevronBreadcrumb cover 80% of use cases. FloatingBreadcrumb fits top-of-page sticky contexts.
Best Practices
Keep breadcrumbs to 4 levels max before collapsing the middle. Always make parent crumbs clickable — the current page crumb should not be a link.
Why This Component Matters
Breadcrumbs are the primary wayfinding tool in deep hierarchies. A consistent, well-animated trail reduces disorientation and improves navigation confidence.
FAQ
QWhich separator should I use?
Chevron for apps and dashboards, slash for file-path contexts, dot for editorial/blog layouts where separators should feel lightweight.
QHow does FloatingBreadcrumb work?
It's a frosted glass pill that expands on hover via AnimatePresence — revealing the full path. Collapses back on mouse leave.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.