Breadcrumb - Keep React
Table of Contents#
- Default Breadcrumb
- Border Types
- Divider Icon Type
- Customize Breadcrumb
- Breadcrumb API Reference
- Item API Reference
Default Breadcrumb#
The default Breadcrumbs component offers a simple and intuitive way for users to grasp their current location within a website or application.
Border Types#
The Breadcrumbs component includes the borderType prop with two possible values: "border-xy" and "border-y".
Divider Icon Type#
The Breadcrumbs component incorporates the dividerIconStyle prop with two possible values: "slash" and "caret".
Customize Breadcrumb#
You can customize the breadcrumb component using the className props. Additionally, we provide more APIs for customizable options.
Breadcrumb API Reference#
Explore the available props for the <Breadcrumb> component.
| Property | Description | Type | Default |
|---|---|---|---|
| borderType | Icon to be used as a separator between breadcrumb items. | border-xy border-y | <ArrowsLeftRight/> |
| dividerIcon | An icon element to display within the breadcrumb items. | ReactNode | None |
| dividerIconStyle | An icon element to display within the breadcrumb items. | slash caret | caret |
| icon | Breadcrumb main icon | ReactNode | Home |
| className | Custom class to be added to the breadcrumb. | string | None |
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 | # |
| activeType | Defines the active state style for the breadcrumb item. | border base | base |
| className | Custom class to be added to the breadcrumb item wrapper. | string | None |