1.1.0 • Published 8 months ago
breadcrumbs-js v1.1.0
Dynamic Breadcrumbs UI
Fully Customizable React Breadcrumbs Component.
Installation
npm i breadcrumbs-jsUsage/Examples
import { Breadcrumb } from "breadcrumbs-js"<Breadcrumb homeItem={{link: "/"}} items={[{ name: "Orders", link: "/orders" }, { name: "View Order" }]} />Props
| Prop | Type | Description |
|---|---|---|
className | string | A custom class to apply to the root wrapper of the breadcrumb. |
itemsClassName | string | A class name to apply to all breadcrumb items. |
activeItemClassName | string | A class name to apply to the last (active) breadcrumb item. |
separatorClassName | string | A class name to apply to the breadcrumb separator. |
homeItem | { link?: string; text?: string; icon?: ReactNode; noIcon?: boolean } | An object representing the home item. It can include link, text, icon, and an optional noIcon property to hide the icon. |
separator | string | Defines the separator to use with the predefined strings. |
linkComponent | ComponentType<any> | A custom link component that will be used to render the breadcrumb links (defaults to <a> if not provided). |
linkAttributeName | string | The name of the custom attribute (e.g., to) if your custom link component uses something other than href. |
items | BreadcrumbItem[] | An array of breadcrumb items. Each item can have name, link, and icon. |
BreadcrumbItem type:
| Prop | Type | Description |
|---|---|---|
name | string | The name or label of the breadcrumb item. |
link | string | The URL to navigate to when the breadcrumb item is clicked (optional). |
icon | ReactNode | An optional icon to display next to the breadcrumb item (optional). |
Note: For custom links, the component should at least accept className, href, and children props to function properly.
If your component accepts, for example, a to attribute instead of href, you can provide the linkAttributeName prop to the <Breadcrumb> component.
Contribute
Feel free to contribute to my small repo! Your contributions are always welcome. Whether it's fixing bugs, adding new features, or improving the documentation, any help is appreciated.
To get started, fork the repository, make your changes, and create a pull request. Thank you for being part of this project!