Breadcrumb - Keep React
Table of Contents#
- Default Breadcrumb
- Breadcrumb With Border
- Breadcrumb With Page Icon
- Breadcrumb With Separator Icon
- Breadcrumb With Number Item
- Breadcrumb API Reference
- Breadcrumb Item API Reference
Default Breadcrumb#
The default Breadcrumbs component provides a simple and intuitive way for users to understand their current location within a website or application.
Breadcrumb With Border#
The Breadcrumbs component with the breadCrumbWithBorder prop set to true adds a subtle border around each breadcrumb item, providing a clear visual separation between the items.
Breadcrumb With Page Icon#
By utilizing the icon prop and providing an appropriate icon component, such as <House size={24} color="#AFBACA" />, you can visually represent each page or section within the breadcrumb navigation, making it easier for users to identify their current location within the website or application.
Breadcrumb With Separator Icon#
You can further customize the appearance of your breadcrumb navigation by adding a separator icon between items using the separatorIcon with any icon.
Breadcrumb With Number Item#
Enhance user navigation through step-by-step processes or hierarchical sections by incorporating numbered items into the Breadcrumbs component.
Breadcrumb API Reference#
Explore the available props for the <Breadcrumb> component
| Property | Description | Type | Default |
|---|---|---|---|
| separatorIcon | Icon to be used as a separator between breadcrumb items. | ReactNode | <ArrowsLeftRight/> |
| breadCrumbWithBorder | Add a border around the breadcrumb container. | boolean | false |
Breadcrumb Item API Reference#
Explore the available props for the <Breadcrumb.Item> component
| Property | Description | Type | Default |
|---|---|---|---|
| href | The URL to navigate to when the breadcrumb is clicked. | string | # |
| icon | An icon element to display within the breadcrumb. | ReactNode | None |
| active | Defines the active state style for the breadcrumb. | border bar base | base |
| disabled | Disables the breadcrumb, making it uncheckable. | boolean | false |