Breadcrumbs

Breadcrumbs provide a clear navigation path showing users their current location within the site hierarchy. This component helps users understand where they are and provides an easy way to navigate back to parent pages. The breadcrumbs include a home icon for the first item and visual separators between each level.

Do

  • Start with "Home" as the first breadcrumb item to provide a consistent navigation anchor.
  • Breadcrumbs should reflect the site's information architecture hierarchy, not the user's navigation path.
  • Only display the primary pathway if there are multiple pathways to a page within the site hierarchy.
  • Use clear, descriptive labels that match the actual page titles or section names.
  • Use consistent terminology that matches your site's navigation structure.
  • Make all page titles except the current page clickable to enable easy navigation.
  • Place breadcrumbs near the top of the page before the main heading.
  • On mobile, shorten the breadcrumb trail to the parent page only to optimize usability for smaller screens. This allows users to easily navigate back up through the information architecture without a long trail that takes up excessive space on small viewports.

Don't

  • Don't duplicate the main navigation — breadcrumbs should show hierarchy, not repeat menu items or categories that are not page links.
  • Don't make the current page clickable — it should be displayed as plain text to indicate the user's location.
  • Don't use breadcrumbs on the homepage — they're unnecessary when users are already at the top level.
  • Don't use breadcrumbs if the site is only 1-2 layers deep — for shallow sites, this type of wayfinding is not necessary.
  • Don't display the user's pathway — display the primary pathway in the site hierarchy. Users can use the browser's back button to navigate back through their path if needed.
  • Don't create overly long trails — consider condensing middle levels if the path becomes too lengthy.
  • Don't use vague labels like "Page 1" or "Section A" — be specific about the content and use accurate page titles.
  • Don't forget the home icon — it provides visual recognition and a consistent starting point.
  • Don't use breadcrumbs as the only navigation method — they supplement, not replace, primary navigation.
  • Don't break the visual hierarchy — ensure breadcrumbs don't compete with page headings for attention.

Default

Four-level navigation trail for a government service page. Demonstrates the complete breadcrumb structure from Home > Services > Fishing Licence > Renewal Form, showing how users can navigate through a typical government service workflow. The current page (Renewal Form) appears as non-clickable text, while all parent levels remain interactive.

Open example in a new tab

Accessibility Best Practices

Screen Reader Support

  • Semantic navigation: Uses proper <nav> element with role="navigation" for clear landmark identification.
  • Descriptive labeling: Includes aria-label="breadcrumb" to announce the navigation purpose to screen readers.
  • Ordered list structure: Uses <ol> to convey the hierarchical sequence of navigation items.
  • Clear link text: Each breadcrumb item contains descriptive text that makes sense when read out of context.

Keyboard Navigation

  • Full keyboard access: All interactive breadcrumb links are accessible via Tab key navigation.
  • Logical tab order: Links follow the natural reading order from left to right.
  • Focus indicators: Clear visual focus states help keyboard users identify their current position.
  • Skip functionality: Users can easily skip over breadcrumbs to reach main content.

Visual Accessibility

  • Colour contrast: Breadcrumb text and separators meet WCAG contrast requirements.
  • Icon clarity: The home icon provides visual recognition while maintaining text alternatives. The home icon should only be used to represent navigation back to the homepage. Ensure that icons used for different content or functions are noticeably different, for example, an icon representing housing needs to be distinct from the homepage icon.
  • Separator visibility: Slash icons clearly delineate between breadcrumb levels.
  • Current page indication: Non-linked current page text is visually distinct from clickable items.
  • Visible state changes: Linked paged titles change colour and lose the underline on hover, providing a visual indication that does not rely solely on colour.

Content Guidelines

  • Consistent labeling: Use the same terminology as your main navigation and page titles.
  • Appropriate length: Keep individual breadcrumb labels concise but descriptive.
  • Logical hierarchy: Ensure the breadcrumb path reflects the actual site structure.
  • Current page handling: Never make the current page clickable - display it as static text.

Implementation Considerations

  • Responsive behavior: Breadcrumbs adapt appropriately on mobile devices to conserve space without breaking the layout. On mobile, only links to the homepage (represented by a linked home icon) and the parent page display in the breadcrumbs. The simplified breadcrumbs still adhere to their core purpose, easy backward site structure navigation, and provide context for location within the site.
  • Performance: Component loads efficiently without impacting page speed.
  • Testing: Regularly verify breadcrumb accuracy with screen readers and keyboard-only navigation.

ARIA Attributes in Use

  • role="navigation" - Identifies the breadcrumb as a navigation landmark.
  • aria-label="breadcrumb" - Provides specific context about the navigation type.
  • Semantic HTML structure with <ol> and <li> elements for proper hierarchy announcement.
Mis à jour: 02 décembre 2025