Skip to main contentCarbon Design System

Breadcrumb

Color

ElementPropertyColor token
Linkcolor$link-primary
Link:hovercolor$link-primary-hover
Link:activecolor$text-primary
Link:focusoutline$focus
Slashcolor$text-primary
Current pagecolor$text-primary
Breadcrumb states and color

Typography

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

ElementFont-size (px/rem)Font-weightType token
Link14 / 0.875Regular / 400$body-compact-01

Structure

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

ElementPropertypx/remSpacing token
Breadcrumbmargin-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

ElementPropertyColor token
Overflow menu itemcolor$icon-primary
Overflow menu item:hoverbackground-color$background-hover

Typography

ElementFont-size (px/rem)Font-weightType token
Overflow menu item14 / 0.875Regular / 400$body-short-01

Structure

ElementPropertypx / remSpacing token
Overflow menu itemheight32 / 2–
Truncated breadcrumb menu example

Recommended structure and spacing measurements for breadcrumb | px / rem