role navigation
Breadcrumb draft v0.1.0
Shows where the current page sits in a hierarchy, with a link to each level above it.
A breadcrumb lists the pages above the current one, from the top of the hierarchy down, each as a link, and ends with the current page, which is not a link. It tells people where they are and lets them go up one or several levels in one activation. It is a navigation landmark of its own, separate from the main navigation.
Tokens
From packages/tokens/src/components/breadcrumb.tokens.json. Path grammar: breadcrumb.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (1)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
breadcrumb.container.gap
Between an item, the separator and the next item.
|
dimension |
{space.4}
|
4px
|
--breadcrumb-container-gap
|
Part link (12)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
breadcrumb.link.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--breadcrumb-link-color-default
|
breadcrumb.link.color.hover
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--breadcrumb-link-color-hover
|
breadcrumb.link.color.current
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--breadcrumb-link-color-current
|
breadcrumb.link.typography.small
|
typography |
{body.family}{body.size.xs}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--breadcrumb-link-typography-small-font-family--breadcrumb-link-typography-small-font-size--breadcrumb-link-typography-small-font-weight--breadcrumb-link-typography-small-line-height--breadcrumb-link-typography-small-letter-spacing
|
breadcrumb.link.typography.medium
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--breadcrumb-link-typography-medium-font-family--breadcrumb-link-typography-medium-font-size--breadcrumb-link-typography-medium-font-weight--breadcrumb-link-typography-medium-line-height--breadcrumb-link-typography-medium-letter-spacing
|
breadcrumb.link.border-radius
|
dimension |
{corner-radius.2xs}
|
2px
|
--breadcrumb-link-border-radius
|
breadcrumb.link.min-height
|
dimension |
{space.24}
|
24px
|
--breadcrumb-link-min-height
|
breadcrumb.link.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--breadcrumb-link-outline-width-focus-visible
|
breadcrumb.link.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--breadcrumb-link-outline-offset-focus-visible
|
breadcrumb.link.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--breadcrumb-link-outline-color-focus-visible
|
breadcrumb.link.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--breadcrumb-link-transition-duration
|
breadcrumb.link.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--breadcrumb-link-transition-easing
|
Part separator (8)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
breadcrumb.separator.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--breadcrumb-separator-font-family
|
breadcrumb.separator.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--breadcrumb-separator-font-weight
|
breadcrumb.separator.fill
|
number |
{font.icon.fill.off}
|
0
|
--breadcrumb-separator-fill
|
breadcrumb.separator.grade
|
number |
{font.icon.grade.normal}
|
0
|
--breadcrumb-separator-grade
|
breadcrumb.separator.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--breadcrumb-separator-optical-size
|
breadcrumb.separator.color
|
color |
{global.icon.on-base.neutral.tertiary}
|
light
#616161
dark
#9D9B9C
|
--breadcrumb-separator-color
|
breadcrumb.separator.size.small
|
dimension |
{size.2}
|
16px
|
--breadcrumb-separator-size-small
|
breadcrumb.separator.size.medium
|
dimension |
{size.3}
|
20px
|
--breadcrumb-separator-size-medium
|
Parts without tokens: listitem (they inherit from their parent).