Breadcrumbs - Usage

Basic Guidelines

The first Breadcrumb Item named ‘Page 1’ will always show ‘Home’ and should not be renamed.

Behaviour

Breadcrumbs are set to scroll automatically if the Breadcrumb path is wider than the viewport. The default position of the Breadcrumbs will always display the current page and if necessary clip any excess text on the left.

Alignment

The mobile variant spans full width on mobile — the necessary margins are already built into the component.

In a 12-column grid layout the Breadcrumbs sits in-line with the rest of the content. The example below is downscaled proportionally for illustration purposes.

Notes on Alignment in Figma

The mobile variant is right-aligned by default to show the current page. Any content wider than the viewport is clipped.

If the Breadcrumbs path is narrower than the viewport width, the alignment will need to be changed to left.