1.1.0 • Published 1 year ago

breadcrumbs-js

Licence

—

Version

1.1.0

Deps

Size

19 kB

Vulns

Weekly

Summary Dependency Versions

Dynamic Breadcrumbs UI

Fully Customizable React Breadcrumbs Component. Example Image

Installation

  npm i breadcrumbs-js

Usage/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!