breadcrumbs-ts
v0.1.4
Published
A dynamic React component for adding customizable breadcrumbs in your project. Built using **React.js**, **TypeScript**, and **Storybook**.
Downloads
16
Maintainers
Readme
breadcrumbs-ts
A dynamic React component for adding customizable breadcrumbs in your project. Built using React.js, TypeScript, and Storybook.
Features
- Custom Home Route: Easily set your home route to any desired path.
- Custom Styles: Apply unique styles to the home route, individual routes, and the active route.
- Breadcrumb Capitalization: Option to capitalize breadcrumb labels.
- Limit Breadcrumbs: Set a maximum number of breadcrumbs to display.
- Fully Dynamic: Dynamically generates breadcrumbs based on your route structure.
Installation
You can install the package via npm or yarn:
npm install breadcrumbs-ts
# or
yarn add breadcrumbs-ts
Here's a basic example of how to integrate the breadcrumbs-ts
component into your project:
import Breadcrumbs from 'breadcrumbs-ts';
const ExamplePage = () => {
return (
<Breadcrumbs
homeElement="Home"
separator="/"
activeClasses="text-indigo-500"
containerClasses="grid py-5 px-10 text-gray-400 gap-1 text-sm"
listItemClasses="c-hover c-margin c-font-weight c-text"
capitalizeLinks
/>
);
};
export default ExamplePage;
Storybook Demo
You can view a live demo of the component in Storybook:
| Prop Name | Type | Description | Default |
| ---------------- | ------- | --------------------------------------------------------------------------------------- | -------- |
| homeElement | string | Custom element for the home route (text or component). | 'Home'
|
| separator | string | Custom separator between breadcrumbs. | '/'
|
| activeClasses | string | CSS classes to apply to the active breadcrumb. | ''
|
| containerClasses | string | CSS classes for the breadcrumb container. | ''
|
| listItemClasses | string | CSS classes for individual breadcrumb items. | ''
|
| capitalizeLinks | boolean | Capitalizes each breadcrumb label. | false
|
| maxVisibleItems | number | Sets the maximum number of breadcrumbs to display. Remaining breadcrumbs are collapsed. | 5
|
Customization
You can customize the following parts of the breadcrumbs:
Home Element: Replace the default home route label with custom text or a React component.
Separator: Define a custom separator between breadcrumb items.
Style Customization: Apply custom CSS classes to the container, breadcrumb items, and the active breadcrumb.
Capitalize Links: Enable automatic capitalization of breadcrumb labels.
License
This project is licensed under the MIT License.
This version reflects the correct usage of the Breadcrumbs
component, including props like homeElement
, separator
, activeClasses
, containerClasses
, listItemClasses
and maxVisibleItems
.