Skip to main content

Color

ClassPropertySCSSHEX
.bx--linkcolor$brand-01#3d70b2
.bx--link:hovercolor$hover-primary-text#294c86
.bx--breadcrumb-item::aftercolor$text-02#5a6872

Typography

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

ClassFont-size (px/rem)Font-weightType style
.bx--link14 / 0.875Roman / 400-

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-item::aftermargin-left16 / 1$spacing-md

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

ClassPropertySCSSHEX
.bx--overflow-menu-options__btncolor$text-01#152934
.bx--overflow-menu-options__option:hoverbackground-color$hover-row#5596e6 at 10% opacity

Typography

ClassFont-size (px/rem)Font-weightFont style
.bx--overflow-menu-options__btn14 / 0.875Roman / 400-

Structure

ClassPropertypx / remSpacing token
.bx--overflow-menu-optionsmargin-top8 / 0.5$spacing-xs

Truncated breadcrumb dropdown example Recommended structure and spacing measurements for Breadcrumb | px / rem