Skip to main contentCarbon Design System

Breadcrumb

Color

ClassPropertyColor token
.bx--linkcolor$link-01
.bx--link:hovercolor$hover-primary-text
.bx--breadcrumb-item::aftercolor$text-01

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
Breadcrumb typography treatment example

Breadcrumb typography treatment example

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 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-row

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 dropdown example

Recommended structure and spacing measurements for breadcrumb | px / rem