Breadcrumb
Navigational breadcrumbs that auto-detect and highlight your current path.
The Breadcrumb component lets users see their current location in your website’s navigational hierarchy. By default,
it parses the current path and highlights the matching crumb. You can also customize the sections prop to define
your own breadcrumb structure.
The Breadcrumb component's crumbs are clickable to let the user jump back to any part of the hierarchy.
Usage
javascript
1import Breadcrumb from '@/components/atoms/Breadcrumb'; 2 3<Breadcrumb />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | array | [] | Breadcrumb route definitions, e.g. { href, title, items?: nested }. |
| delimiter | Icon | <Icon /> | Separator between crumbs. |
| isInteractiveLast | boolean | false | Makes the final crumb clickable if true. |
| className | string | "" | Extra Tailwind classes. These override internal defaults using mergeClasses. |
| ...props | object | - | Additional props (e.g. style, onMouseEnter) passed down to the main <nav> element. |
Examples
Default Breadcrumb
Just drop it in and it will automatically parse the current path.
Provide Sections
Create an array of objects with href and title properties. Breadcrumb will automatically parse the current path
and highlight the matching crumb.
Make sure each item has a title and href property.
Custom Delimiter
Swap in any delimiter you want (like a slash / or text >).