The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.

When to use this component

Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website.

When not to use this component

Do not use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction.

Do not add a breadcrumbs if you are also using a back link.

Formatted example
HTML code
<div class="breadcrumbs">
    <ol class="breadcrumbs--list">
        <li class="breadcrumbs--list-item">
            <a class="breadcrumbs--link" href="#">Home</a>
        </li>
        <li class="breadcrumbs--list-item">
            <a class="breadcrumbs--link" href="#">About us</a>
        </li>
        <li class="breadcrumbs--list-item">
            <a class="breadcrumbs--link" href="#">Our team</a>
        </li>
    </ol>
</div>
Markdown
# Add the following to the page front matter.
# In most cases, you do not need to add:
# - a link to the home page
# - a link to the name of the current collection

breadcrumbs:
- title: Item name
  url: /page-path

Disable breadcrumbs

If you are using the Jekyll template, some pages will automatically add breadcrumbs. You can disable the breadcrumbs by changing the Markdown in the file front matter.

Markdown
# Add the following to the page front matter:

breadcrumbs: false

Override breadcrumbs

If you are using the Jekyll template, some pages will automatically add a link to the home page, and the collection of the current page. You can override the latter by changing the Markdown in the file front matter.

Markdown
# Add the following to the page front matter:

breadcrumbs-override: true