Skip to content

Properties

Breadcrumb properties

PropertiesDescription
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

PropertiesDescription
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.

Keynb-NOen-GB
Breadcrumb.navTextSidehierarkiPage hierarchy
Breadcrumb.goBackTextTilbakeBack
Breadcrumb.homeTextHjemHome
Breadcrumb.backToTextTilbake til...Back to...