Breadcrumb
Indicates the user's location in a website hierarchy.
Example
Code
Usage
Import the component
_10import { Breadcrumb } from '@faststore/ui'
Import styles
To apply styles, include the following in your stylesheet:
_10@import '@faststore/ui/src/components/molecules/Breadcrumb/styles.scss';
For details, see Importing FastStore UI component styles.
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-breadcrumb-margin-left | var(--fs-spacing-0) |
Nested Elements
List Item
| Local token | Default value/Global token linked |
|---|---|
--fs-breadcrumb-list-item-padding | var(--fs-spacing-0) |
--fs-breadcrumb-list-item-last-text-color | var(--fs-color-text-light) |
--fs-breadcrumb-list-item-max-width-mobile | 30% |
Link
| Local token | Default value/Global token linked |
|---|---|
--fs-breadcrumb-link-color-visited | var(--fs-color-link) |
Link Home
| Local token | Default value/Global token linked |
|---|---|
--fs-breadcrumb-link-home-padding | var(--fs-spacing-1) |
--fs-breadcrumb-link-home-border-radius | var(--fs-border-radius-circle) |
--fs-breadcrumb-link-home-hover-bkg-color | var(--fs-color-primary-bkg-light) |
--fs-breadcrumb-link-home-color | var(--fs-color-text) |
Divider
| Local token | Default value/Global token linked |
|---|---|
--fs-breadcrumb-divider-height | var(--fs-spacing-3) |
--fs-breadcrumb-divider-margin | var(--fs-spacing-1) |
--fs-breadcrumb-divider-border-left-width | var(--fs-border-width) |
--fs-breadcrumb-divider-border-left-color | var(--fs-border-color-light) |
Dropdown Button
| Local token | Default value/Global token linked |
|---|---|
--fs-breadcrumb-dropdown-button-margin-left | var(--fs-breadcrumb-margin-left) |
--fs-breadcrumb-dropdown-button-color | var(--fs-color-link) |
--fs-breadcrumb-dropdown-button-border-radius | var(--fs-spacing-0) |
--fs-breadcrumb-dropdown-button-transition-property | var(--fs-transition-property) |
--fs-breadcrumb-dropdown-button-transition-timing | var(--fs-transition-timing) |
--fs-breadcrumb-dropdown-button-transition-function | var(--fs-transition-function) |
Data attributes
You can target and override
Breadcrumb styles using the following data attributes:data-fs-breadcrumbdata-fs-breadcrumb-listdata-fs-breadcrumb-list-itemdata-fs-breadcrumb-linkdata-fs-breadcrumb-link-homedata-fs-breadcrumb-dividerdata-fs-breadcrumb-dropdown-buttondata-fs-breadcrumb-dropdown-menudata-fs-breadcrumb-dropdown-linkdata-fs-breadcrumb-is-desktop="true | false"Props
| Name | Type | Description | Default |
|---|---|---|---|
| breadcrumbList* | ItemElement[] | Array of ItemElement that represents each breadcrumb item. | |
| homeLink | ReactElement<any, string | JSXElementConstructor<any>> | Link go to home. | |
| dropdownButtonIcon | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Icon for dropdown button. | |
| collapsedItemsIcon | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Icon for collapsed items. | |
| renderLink | (renderLinkProps: RenderLinkProps) => ReactElement<any, string | JSXElementConstructor<any>> | Function to render a item as breadcrumb link. @param renderLinkProps Properties for each item to be rendered. @returns Link to be rendered. | |
| divider | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A ReactNode that will be rendered as the Divider icon. | |
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). |