Documentation
Feedback
Guides
Storefront Development

Storefront Development
Breadcrumb

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

Overview

Example
Code

Import

Import the component from @faststore/ui

_10
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:

_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

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%
Local tokenDefault value/Global token linked
--fs-breadcrumb-link-color-visited
var(--fs-color-link)
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)
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"
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page