Breadcrumb

A breadcrumb displays the user’s current location within a sequence of pages and enables them to navigate backwards through it.

Overview

The purpose of breadcrumbs is to provide users with a clear and intuitive way to understand their location within a website or application's hierarchy and navigate back to higher-level pages. They enhance the user experience by offering contextual awareness and simplifying navigation, especially within complex or deeply nested structures.

Breadcrumbs serve a wide range of purposes in user interfaces, such as allowing users to retrace their steps, quickly access parent pages, and reduce the need for extensive scrolling or menu navigation. They improve efficiency and help users maintain their sense of orientation within the overall structure.

A breadcrumb navigation showing a hierarchical path with Home, SGG, and John's Pizza links.

Dos and Don'ts

Help users to understand where they are within a site hierarchy of more than one level.
Provide a shortcut to parent pages.
Show the full path of breadcrumb items, in the context of site hierarchy whenever possible.
Use breadcrumbs to compliment existing methods of navigation.

Don't

Don't display on a top-level page, such as a home or high-level category page.
Don't allow breadcrumbs to flow onto more than one line.
Don't show the previous pages a user has taken to arrive at a page.
Don't create a custom symbol to separate breadcrumb items.

Anatomy

Scrim (optional): Provides contrast when used on an image or dark container.
Breadcrumb link: The Link allows users to redirect to the first page within the flow.
Chevron: Clearly divides each link and indicates the site hierarchies progression.
Current Page (Optional): Highlights the page the user is currently viewing.
Ellipsis Overflow Link (Optional): Appears when breadcrumb content exceeds the available width, allowing users to access the hidden breadcrumb links.
Popover (Optional): Shows an interactive list of overflow breadcrumbs when they exceed the available width.

Variations

Default

The standard breadcrumb list to be used to specify the full site hierarchy in regards to the page which the user has selected.

Back

Used to navigate to the higher-level page in the site hierarchy. This variant is optional for desktop interfaces and required for mobile.

Modifiers

Scrim

The scrim variant of the Breadcrumb is to be used when the component is above an image or darker container to ensure high contrast and legibility.

Current page

Display the current page when no page title is visible to clarify its location and identity. If the page title is defined near the top of the current page, the current page breadcrumb is optional.

Overflow

On desktop, breadcrumbs use overflow to maintain a single-line layout. The first item remains visible, followed by an ellipsis (...) that hides intermediate links. Lower-level items stay visible, ensuring clear navigation. On mobile, overflow is not used, as users rely on a back button.

Breadcrumb with improper overflow showing items flowing onto multiple lines. — Don't

Truncation

If a breadcrumb label is still too long to fit within a single line, even after overflow is applied, truncate it with an ellipsis at the end. When truncated, display the full title in a tooltip on hover, focus, or single tap.

Breadcrumb showing truncated text with tooltip on hover.

The Popover's width should not exceed that of the Breadcrumb component's. At maximum, the width should be 600px. If a breadcrumb link exceeds the Popover's width, it wraps onto the next line.

Narrow

Only the back variant is available in narrow screen sizes.

Default breadcrumb variant on narrow screen causing overflow issues. — Don't

Interactions

The Breadcrumb link’s target area width should be defined by the width of its label (not including the chevron). The height of the target area is 24px.

Breadcrumb interaction different target areas of the breadcrumb

Opens the Breadcrumb link: Navigates the user to the selected page.
Closes the popover: The popover list will disappear.
Opens the popover: Interacting with the ellipsis reveals a Popover containing the Breadcrumb links hidden due to overflow when the user clicks, or keyboard focuses.

Content

Use the full name of each page referenced in the Breadcrumbs so that each link clearly indicates the different levels of the site structure to the user.

Layout

Placement

Breadcrumbs should be placed toward the top left of the page below any navigation elements but above the page title.

Alignment

Align the tooltip to the centre of the Breadcrumb link to maintain clarity while preventing it from going out of bounds.

The Popover should be aligned to the left of the Breadcrumb component. To ensure that the Popover does not go out of bounds from it's container or screen.

Popover alignment showing left alignment to prevent overflow.