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
import '@faststore/ui/src/components/molecules/Breadcrumb/styles.scss'Usage
<Breadcrumb breadcrumbList={breadcrumbList} />Props
| Name | Type | Description | Default |
|---|---|---|---|
| Coming Soon |
| Local token | Default value/Global token linked |
|---|---|
--fs-breadcrumb-margin-left | calc(-1 * var(--fs-spacing-1)) |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-breadcrumb-margin-left | calc(-1 * var(--fs-spacing-1)) |
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) |
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"