Breadcrumbs

Breadcrumbs display the current page or context within the site, allowing them to navigate different levels of the hierarchy.

Page navigation navigation

Anatomy

Breadcrumbs are made of links (indicating parents), dividers, and the current page. The default breadcrumbs component can be modified to change the number of items within the chain.

Note: The space between items is set to 0px as the divider has padding built into it.

Best practices

Most appropriate on pages that:

Are deeply nested within a site
Lack section-level navigation
Need a quick way to navigate back to the parent page

Each breadcrumb should contain a link, with the last item showing the current page context.

By default the breadcrumbs component can show up to 10 items within the chain.

An image showing various breadcrumbs with different numbers of items in the breadcrumb chain