Breadcrumb

v2.2

Breadcrumbs show the navigational hierarchy of a page.

CSS
Marko
React

Considerations

Guiding

Breadcrumbs help wayfinding no matter how many layers.

Hierarchal

Breadcrumbs show a user's current location within the hierarchy of a site.

Contextual

Breadcrumbs help users understand what screen they're on relative to the information architecture.

Anatomy

Page link
Separator
Overflow

Properties

Page link (Label)

Page links use the exact name as it appears in the site hierarchy. Matching helps users recognize where they are and navigate confidently.

Use sentence case
No ending punctuation
Max character count: 24

Default

By default, the first item is the root category page and the last item is the most immediate parent page. Pages within the hierarchy are separated by a chevron to indicate the hierarchical relationship.

Last item as current

The last item in the hierarchy can be the current page title if it is valuable to include, and it should be static, not interactive.

Overflow

Use an overflow control to collapse pages when there are 4 or more labels visible to avoid extending elements offscreen.

Overflow can also be used if multiple parent pages have truncated labels.

The width of the parent container informs how many items are collapsed into an overflow and whether or not the last page is truncated.

Behavior

Character count

While titles can vary in size, the preferred character count for titles is 24 characters and under.

Multiple long labels

Only 1 label should be truncated within the hierarchy. If multiple labels are long, collapse all but the last page into the overflow menu.

Screen sizes

Small

Web collapses all parent pages into an overflow and only surfaces the last item. Native apps do not use breadcrumbs. Instead, use the top navigation bar with a back action.