Components

Breadcrumbs

Breadcrumbs help users understand where they are within a structure and make it possible to navigate back to higher levels.

Overview Code Accessibility

Use breadcrumbs when

users may want to navigate back to previous levels
users need help understanding where they are in the structure

Avoid breadcrumbs when

the navigation is linear, for example across steps in a workflow or a form

Examples

Show only the nearest level

On mobile, or when the breadcrumb trail becomes long, you can show only a link to the nearest parent page. Be consistent in your approach, and use either this variant or the full breadcrumb trail, not both.

Below is an example of what long navigation can look like.

Guidelines

Breadcrumbs are only needed when there are three or more levels on a website.

Placement

Breadcrumbs should always be placed at the top left of the page when using left-to-right text. They should appear below the menu and main navigation, but above the page title.

Hiding breadcrumbs on mobile

For deep navigation, you can configure the component to show only the first and last parts of the trail on mobile. This can happen automatically on screens narrower than 650px, where only the link one level down is shown. An implementation example is available in the code tab.

Text

The text should match the page headings or navigation labels so that each level is easy to recognise.

Edit this page on github.com (opens in a new tab)