Breadcrumb

Element	Property	Color token
Text: enabled	text-color	`$link-primary`
Text: current	text-color	`$text-primary`
Slash	text-color	`$text-primary`
Overflow: icon	svg	`$link-primary`

Breadcrumb color and overflow color

State	Element	Property	Color token
Hover	Text	text-color	`$link-primary-hover`
Focus	Text	text-color	`$link-primary`
	Border	border	`$focus`
Active	Text	text-color	`$text-primary`
	Border	border	`$focus`
Current	Text	text-color	`$text-primary`

Breadcrumb interactive state color

A group of breadcrumbs with overflow content uses the overflow menu component to disclose additional breadcrumbs in a menu view. A tooltip component appears in the hover, focus, and active states. Use the menu and tooltip colors for these instances.

State	Element	Property	Color token
Hover	Icon	svg	`$link-primary-hover`
Focus	Icon	svg	`$link-primary`
	Border	border	`$focus`
Active	Icon	svg	`$icon-primary`
	Border	border	`$focus`

Breadcrumb overflow interactive state color

There are two sizes of breadcrumbs: small and medium. Each breadcrumb size uses a different type token. Breadcrumbs receive an underline in the hover, focus, and active states.

Element	Font-size (px/rem)	Font-weight	Type token
Text: small	12 / 0.75	Regular / 400	`$label-01`
Text: medium	14 / 0.875	Regular / 400	`$body-compact-01`
Text: overflow menu	14 / 0.875	Regular / 400	`$body-compact-01`

When an overflow menu is present to disclose overflow breadcrumbs, use the menu component structure.

Element	Property	px/rem	Spacing token
Link	margin-left, margin-right	4 / 0.25	`$spacing-02`
Link: overflow icon	margin-left, margin-right	4 / 0.25	`$spacing-02`
Link: overflow menu	height	40 / 2.5	`$spacing-08`

Structure and spacing measurements for small breadcrumb | px / rem

Structure and spacing measurements for small breadcrumb overflow | px / rem

Element	Property	px/rem	Spacing token
Link	margin-left, margin-right	8 / 0.5	`$spacing-03`
Link: overflow icon	margin-left, margin-right	8 / 0.5	`$spacing-03`
Link: overflow menu	height	40 / 2.5	`$spacing-08`

Structure and spacing measurements for medium breadcrumb | px / rem

Structure and spacing measurements for medium breadcrumb overflow | px / rem

Element	Size	Height (px/rem)
Breadcrumb	Small (sm)	16 / 1
	Medium (md)	18 / 1.125

Size measurements for small and medium breadcrumb | px / rem

Help us improve by providing feedback, asking questions, requesting features, or leaving any other comments on GitHub.

Color

Typography

Structure

Size

Feedback