Properties
Breadcrumb properties
| Property | Type | Description |
|---|---|---|
data | Array<BreadcrumbItemProps> | (optional) List of pages to render as breadcrumbitems. Each object in data can include all properties from BreadcrumbItem properties. |
children | React.ReactNode | (optional) Content of the component. Can be used instead of property data, by adding Breadcrumbitem children <Breadcrumb.Item {...props} />. |
variant | responsive single multiple collapse | (optional) Defaults to 'responsive' or 'single' depending on content. Options: responsive | single | multiple | collapse . |
href | string | (optional) For variant single, set href for button click. Can be used instead of event/property onClick. |
navText | React.ReactNode | (optional) Every <nav> on a page needs an unique aria-label text. |
goBackText | React.ReactNode | (optional) Override with a custom 'Back' text for variant single (Not recommended). |
homeText | React.ReactNode | (optional) Override with a custom 'Home' text (Not recommended) |
backToText | React.ReactNode | (optional) Override with a custom 'Back to...' text (Not recommended). |
styleType | Various | (optional) Use one of the Section component style types (style_type). Defaults to transparent. |
collapsedStyleType | error info warning success | (optional) Use one of the Section component variants. Defaults to info. |
className | string | (optional) Custom className for the component root. |
isCollapsed | boolean | (optional) For variant collapse, override isCollapsed for the collapsed content by updating this value using the provided property onClick. |
spacing | Various | (optional) Include spacing properties from Section in breadcrumb. If only true is given, the spacing will be small. Defaults to false. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Breadcrumb.Item properties
| Property | Type | Description |
|---|---|---|
text | React.ReactNode | (optional) Text displaying inside Breadcrumb item. |
variant | home previous current | (optional) The component variant. Options: home | previous | current. |
icon | React.ReactNode | (optional) Override icon displaying on the left side (Not recommended). Default: chevron_left. |
href | string | (optional) Set what happens when the user clicks on the item. Also see onClick event. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
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 | sv-SE (beta) |
|---|---|---|---|
Breadcrumb.navText | Sidehierarki | Page hierarchy | Sidstruktur |
Breadcrumb.goBackText | Tilbake | Back | Tillbaka |
Breadcrumb.homeText | Hjem | Home | Hem |
Breadcrumb.backToText | Tilbake til... | Back to... | Tillbaka till... |