BreadCrumbs
The Breadcrumbs component provides a navigational aid in web applications, allowing users to keep track of their locations within the app hierarchy. It displays a series of links representing the current page and its ancestors, making it easy for users to navigate back to previous sections.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Import the component
import BreadCrumbs from '@start-base/start-ui/BreadCrumbs';Usages
Default BreadCrumbs
BreadCrumbs With Custom Separator
BreadCrumbs With Icon
API
| Name | Type | Default | Description |
|---|---|---|---|
| separator | string | / | Separator of the breadcrumbs |
| data | string | [] | Replace array of the breadcrumbs |
| className | string | `` | Classname of the breadcrumbs |
| activeClassName | string | `` | Classname of the active breadcrumb |
| listClassName | string | `` | Classname of the breadcrumb list |