Breadcrumb

How to use breadcrumbs

Use breadcrumbs on large websites, where you have pages that sit within subcategories. They help users to understand the hierarchy of your website and provide helpful shortcuts to move between different levels to related content easily.

When using breadcrumbs:

• Always place them at the top of the main content, below the header
• Only show them when you are one level into the hierarchy, and not at the highest level
• Use the <nav> element to wrap your mark-up so the breadcrumbs appear to users navigating using landmarks. It’s best practice to use aria-label to label the landmark.
• Order the set of links as a hierarchy by using the ordered list (<ol>) tag. Mark the last link of the list as the current page, using aria-current='location'.

Don't use a breadcrumb to:

• Show progress through a process

Types of breadcrumb

Compact

Narrow breadcrumbs can be used on smaller screen sizes. They let the user move up a level or back a step.

Standard

The standard breadcrumb display shows divided links to help guide users to previous levels within the hierarchy.

Content guidelines

When using breadcrumbs:

• The titles in the breadcrumb should match labels in the navigation and the main header (<h1>) of the page.

Was this page helpful?