Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Breadcrumbs

v.1.0.0 | Saturn

Usage

The name of the tokens object to style the Breadcrumbs component is BREADCRUMBS_STYLES.

You can not change the name of the object of tokens.

There is one prop that allows to modify different aspects of the component:

  • Variant: modify the styles of the Breadcrumbs.

Variants

Variants can modify the styles for the Breadcrumbs. Additionally, it is based on states to individually modify each level. The states are:

12345
enum BreadcrumbsStateType {
  DEFAULT,
  HOVER,
  ACTIVE,
}

The Breadcrumbs states tokens are:

Example

Breadcrumbs theme object example:

12345678910
const BREADCRUMBS_STYLES = {
  [VARIANT]: {
    [STATE]: {
        linkContainer?: CommonStyleType,
        link?: TypographyTypes,
        lastOneCrumb?: TypographyTypes,
        iconDividerContainer?: CommonStyleType,
        iconDivider?: IconTypes,
    },
  },
BreadcrumbsCode API
BreadcrumbsAccessibility