Breadcrumbs

On this page

Example

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Designer Guidance

When to use

Use the breadcrumbs component on every page except the homepage, to help users understand their location within the sites structure. 

When not to use

Do not use the breadcrumb component on the homepage, breadcrumbs are unnecessary when there are no parent pages. 

Do not place breadcrumbs within the <main> body of the page. This component should always appear near the top of the page. 

Do not use breadcrumbs in modal or overlay journeys.

How to use

The breadcrumb should start with a home icon and follow the site hierarchy, ending with the current page. Each breadcrumb link (except the current page) should be a link that navigates directly to the corresponding page. The current page in the sequence should appear last and must not be a link. 

Ensure that the trail accurately reflects the actual site structure.

Behaviours


• Clicking on a breadcrumb link navigates directly to that page.
• The current breadcrumb is static and not clickable.
• On hover the text should increase underline thickness from 1 px to 3 px, and change colour from grey to black.

Developer Guidance

To help assistive technology users, ensure your code includes: 

• Wrap the breadcrumb trail in a <nav> element with aria-label="Breadcrumb" to distinguish it from other navigation elements.
• Mark the current page with aria-current="page".
• Use semantic HTML links (<a>) for each breadcrumb except for the current page.
• Include descriptive text for the home icon (aria-label="Home") so they're announced correctly by screen readers.
• Ensure the breadcrumb appears in a consistent location across all pages.

Content Editor Guidance

Best practices

• Keep breadcrumb labels short and scannable. Use concise, meaningful page titles. 
• Use meaningful, human-readable language, avoid jargon or internal terms.
• Check that the breadcrumb trail accurately reflects the site hierarchy. If it feels incorrect, review the page’s placement in the site structure.

Accessibility

A fully accessible breadcrumb trail should:

• Use semantic HTML navigation (<nav aria-label="Breadcrumb">) to define its role.
• Include links for all parent pages.
• Ensure hover stated are communicated through more than colour alone.
• Maintain clear visual separation between the breadcrumb items.

WCAG Success Criteria

• 1.3.1 Info and Relationships (Level A):
  Information or relationships between visual content is also conveyed through code, such as ARIA or HTML.
• 1.3.2 Meaningful Sequence (Level A):
  Present content in a meaningful order and make sure users can differentiate navigation menus from the main content
• 3.2.3 Consistent Navigation (Level AA):
  Position menus and navigation consistently on all pages 

Related components

Header