Breadcrumb
Demo
Props
| Prop | Type | Description |
|---|---|---|
links | { title: string; icon?: React.ReactNode; href?: string }[] (optional) | An array of objects representing each breadcrumb link, with a title, optional icon, and href. |
separator | React.ReactNode (optional) | A custom separator to display between breadcrumb items. |
locale | string (optional) | Locale of the links. |
customLinkComponent | LinkComponent (optional) | Custom link component for the breadcrumb links. |
classNames | { root?: string; item?: string } (optional) | Custom class names for the breadcrumb and its items. |
Styles
This component allows for custom styles via the classNames prop:
root: CSS class for styling the overall Breadcrumb component.item: CSS class for styling each breadcrumb item.
Functionality
- The Breadcrumb component aids in navigation and provides a visual representation of the user's path within an application or website.
- Supports custom links and icons for enhanced usability and visual appeal.
- Includes a responsive design with a collapsible interface for complex navigation paths.