Breadcrumb

Breadcrumbs help users to understand their current location on a website, and give them the option to move between different levels.

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

Narrow

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

  • Interactive demo - Sainsbury's

Standard

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

  • Interactive demo - Sainsbury's

Light and dark

Light and dark themed breadcrumbs are available to improve contrast against coloured backgrounds.

  • Interactive demo - Sainsbury's
  • Interactive demo - Sainsbury's

Copy 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?


Get in touch

Our team can answer any questions about using breadcrumbs or give you a helping hand with your next project.
Select a theme to demo: