Properties
Breadcrumb properties
| Properties | Description |
|---|---|
data | (optional) List of pages to render as breadcrumbitems. Each object in data can include all properties from BreadcrumbItem props. |
children | (optional) Content of the component. Can be used instead of property data, by adding Breadcrumbitem children <Breadcrumb.Item {...props} />. |
skeleton | (optional) Applies loading skeleton. |
variant | (optional) Override the variant of the component. Options: single | multiple | collapse. |
onClick | (optional) Handle click event on "Back" for variant single and "Back to..." for variant collapse. |
href | (optional) For variant single, set href for button click. Can be used instead of property onClick. |
navText | (optional) Every <nav> on a page needs an unique aria-label text. |
goBackText | (optional) Override with a custom 'Back' text for variant single (Not recommended). |
homeText | (optional) Override with a custom 'Home' text (Not recommended). |
backToText | (optional) Override with a custom 'Back to...' text (Not recommended) . |
styleType | (optional) Use one of the Section component style types (style_type). Defaults to transparent. |
collapsedStyleType | (optional) Use one of the Section component style types (style_type). Defaults to pistachio. |
className | (optional) Custom className for the component root. |
isCollapsed | (optional) For variant collapse, override isCollapsed for the collapsed content by updating this value using the provided property onClick. |
spacing | (optional) Include spacing properties from Section in breadcrumb. If only true is given, the spacing will be small. Defaults to false. |
| Space | (optional) spacing properties like top or bottom are supported. |
Breadcrumb.Item properties
| Properties | Description |
|---|---|
text | (optional) Text displaying inside Breadcrumb item. |
variant | (optional) The component variant. Options: home | previous | current. |
icon | (optional) Override icon displaying on the left side (Not recommended). Default: chevron_left. |
href or onClick | (optional) Set what happens when the user clicks on the item. |
skeleton | (optional) Applies loading skeleton. |
NB: When interactive, the item is an inherited Button. You can therefore swap out the underlying HTML element, by providing a new element or use other Button properties, such as to instead of href.