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) Defaults to 'responsive' or 'single' depending on content. Options: responsive | 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.
Translations
More info about translations can be found in the general localization and Eufemia Forms localization docs.
| Key | nb-NO | en-GB |
|---|---|---|
Breadcrumb.navText | Sidehierarki | Page hierarchy |
Breadcrumb.goBackText | Tilbake | Back |
Breadcrumb.homeText | Hjem | Home |
Breadcrumb.backToText | Tilbake til... | Back to... |