Skip to main contentCarbon Design System

Breadcrumb

Color

ClassPropertyColor token
.bx--linkcolor$link-01
.bx--link:hovercolor$hover-primary-text
.bx--link:activecolor$text-01
.bx--link:focusoutline$focus
.bx--breadcrumb-item::aftercolor$text-01
.bx--breadcrumb-item--current .bx--linkcolor$text-01
Breadcrumb states and color

Typography

When a user hovers overs a breadcrumb, the breadcrumb title should be underlined.

ClassFont-size (px/rem)Font-weightType token
.bx--link14 / 0.875Regular / 400$body-short-01

Structure

The on-click dropdown should follow the overflow menu specs for sizing, padding, and interaction.

ClassPropertypx/remSpacing token
.bx--breadcrumb-itemmargin-left8 / 0.5$spacing-03
Truncated breadcrumb dropdown example

Structure and spacing measurements for breadcrumb | px / rem

Truncated breadcrumbs

Truncated breadcrumbs are not currently built into the breadcrumb component. The following colors from the overflow menu are recommended for the overflow breadcrumb list.

Color

ClassPropertyColor token
.bx--overflow-menu-options__btncolor$icon-01
.bx--overflow-menu-options__option:hoverbackground-color$hover-ui

Typography

ClassFont-size (px/rem)Font-weightType token
.bx--overflow-menu-options__btn14 / 0.875Regular / 400$body-short-01

Structure

ClassPropertypx / remSpacing token
.bx--overflow-menu-optionsheight32 / 2–
Truncated breadcrumb menu example

Recommended structure and spacing measurements for breadcrumb | px / rem