⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Breadcrumb

Breadcrumbs indicate the user's location in a website hierarchy.

Overview


Import

Import the component from @faststore/ui

import { 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:

@import '@faststore/ui/src/components/atoms/Button/styles.scss';
@import '@faststore/ui/src/components/molecules/Dropdown/styles.scss';
@import '@faststore/ui/src/components/molecules/Breadcrumb/styles.scss';

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


Usage

<Breadcrumb breadcrumbList={breadcrumbList} />

Props

NameTypeDescriptionDefault
breadcrumbList*ItemElement[]Array of ItemElement that represents each breadcrumb item.
homeLinkReactElement<any, string | JSXElementConstructor<any>>Link go to home.
dropdownButtonIconstring | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalIcon for dropdown button.
collapsedItemsIconstring | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalIcon 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.
dividerstring | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA ReactNode that will be rendered as the Divider icon.
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).

Design Tokens

Local tokenDefault value/Global token linked
--fs-breadcrumb-margin-leftvar(--fs-spacing-0)

Nested Elements

List Item

Local tokenDefault value/Global token linked
--fs-breadcrumb-list-item-paddingvar(--fs-spacing-0)
--fs-breadcrumb-list-item-last-text-color
var(--fs-color-text-light)
--fs-breadcrumb-list-item-max-width-mobile30%

Link

Local tokenDefault value/Global token linked
--fs-breadcrumb-link-color-visited
var(--fs-color-link)

Link Home

Local tokenDefault value/Global token linked
--fs-breadcrumb-link-home-paddingvar(--fs-spacing-1)
--fs-breadcrumb-link-home-border-radiusvar(--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 tokenDefault value/Global token linked
--fs-breadcrumb-divider-heightvar(--fs-spacing-3)
--fs-breadcrumb-divider-marginvar(--fs-spacing-1)
--fs-breadcrumb-divider-border-left-widthvar(--fs-border-width)
--fs-breadcrumb-divider-border-left-color
var(--fs-border-color-light)

Dropdown Button

Local tokenDefault value/Global token linked
--fs-breadcrumb-dropdown-button-margin-leftvar(--fs-breadcrumb-margin-left)
--fs-breadcrumb-dropdown-button-color
var(--fs-color-link)
--fs-breadcrumb-dropdown-button-border-radiusvar(--fs-spacing-0)
--fs-breadcrumb-dropdown-button-transition-propertyvar(--fs-transition-property)
--fs-breadcrumb-dropdown-button-transition-timingvar(--fs-transition-timing)
--fs-breadcrumb-dropdown-button-transition-functionvar(--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"