Breadcrumb

Indicates the user's location in a website hierarchy.

Overview

Example

Code

Import

Import the component from @faststore/ui


_10import { Breadcrumb } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:


_10@import '@faststore/ui/src/components/molecules/Breadcrumb/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage


_10<Breadcrumb breadcrumbList={breadcrumbList} />

Props

Name	Type	Description
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).

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)`

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)`

Customization

For further customization, you can use the following data attributes:

data-fs-breadcrumb

data-fs-breadcrumb-list

data-fs-breadcrumb-list-item

data-fs-breadcrumb-link

data-fs-breadcrumb-link-home

data-fs-breadcrumb-divider

data-fs-breadcrumb-dropdown-button

data-fs-breadcrumb-dropdown-menu

data-fs-breadcrumb-dropdown-link

data-fs-breadcrumb-is-desktop="true | false"