Breadcrumb
Style
Breadcrumb navigation is composed of links, text, and caret icons as separators. There are two variants, default and subtle, which differ in text and icon color.
Anatomy
- Parent page
- Separator
- Current page
Theme
Breadcrumbs are available in both light and dark themes.
Placement
Breadcrumbs typically appear above the title of a page and below primary and/or secondary navigation.
Space
The space between parent pages or current pages and the separators is 16px. If a row of breadcrumbs has to wrap, the space between the lines is 8px. This remains the same across all breakpoints.
Interaction States
Interaction states are visual representations used to communicate the status of an element or pattern.
Hover
A breadcrumb link turns a darker or lighter shade of the default state’s blue and becomes underlined on hover.
Focus
The focus state of a breadcrumb link looks similar to the hover state, but it adds a focus ring around the link.
Active
Helpful tip
The Active state has the same styles as the Focus state.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
