Breadcrumbs: The breadcrumbs component is made of individual breadcrumb items divided by a separator.
Base Breadcrumb item: Singular links that show the page hierarchy up to the current page.
Separator: Separates each item with space-100.
Active Breadcrumb item: Current page items are considered active.
Ellipsis dropdown: When the breadcrumbs collapse on smaller viewports, middle items populate an ellipsis dropdown.

Guidelines

Breadcrumbs serve as a guide for the user to understand their current location within the site or app's structure.

When to nest

For consistency, we recommend using breadcrumbs on pages that are two or more levels deep.

Placement

When using breadcrumbs, place them on the left side of the top nav bar on nested pages. Consistent placement across the app means users are never confused about their location.

Best practices

It's important that breadcrumbs represent the actual page hierarchy. Avoid breadcrumbs that reflect the user's session history.

Do: Use breadcrumbs to represent page hierarchy.

Don't: Use breadcrumbs to navigate through user session history.

Behaviors

States

Base

Breadcrumb items use the subtle text color when unselected.

Hover

When a breadcrumb item is hovered, its text color changes to a darker color used for hover styling.

Focus

Focused items receive the standard 2px light blue outline.

Active

The breadcrumb for the current page is considered active.

Disabled

Disabled items cannot be interacted with. Both selected and unselected use the same, lighter grey for text color.

By default, breadcrumbs display every item provided there's enough space in the viewport. In smaller spaces or viewports, the breadcrumbs will collapse. Middle items are placed within a dropdown while the first and last items remain visible. The dropdown can be opened by activating the ellipsis in the middle of the breadcrumbs.

Collapsed

When breadcrumbs extend beyond their container, middle items are placed within an ellipsis dropdown.

Content

Capitalization

We recommend using full page titles for breadcrumbs to provide a clear indication of the user's location. Prefer sentence case over title case for consistency across the application.

Do: Use sentence case.

Don't: Use title case.

Truncation

Truncation is automatically applied for items with longer text that would otherwise expand past their container. Truncation is based on a max width set to our spacing token space-3200.

Breadcrumbs

On this page