Breadcrumbs

Overview

Description

The breadcrumb navigation component shows users their current location within a website’s hierarchy, providing a clear, hierarchical trail of links from the homepage to the current page. It functions as a secondary navigation aid, helping users understand their position, easily navigate back to higher-level pages, and avoid getting disoriented in complex interfaces, improving wayfinding and user experience on sites.

Uses

  • Helps users backtrack or jump to higher-level pages.
  • Shows the path from the homepage through categories to the specific item.
  • Helps users navigate multiple levels of pages or categories effectively.

Value to user

  • Provides orientation and quick navigation in deep structures.
  • Location Awareness: Users immediately understand their current page within the site structure.
  • Easy Backtracking: Users can click on previous links in the trail to quickly return to parent pages.
  • Secondary Navigation: Breadcrumbs offer a different path than the primary navigation menu, increasing usability on sites with many pages.
  • Contextual Information: The breadcrumb trail provides context for the current page and helps users find previously visited pages.
  • Better User Experience: By making navigation more intuitive and efficient, breadcrumbs contribute to an overall better user experience.

Best practices

  • Show the full path clearly and in order.
  • Make each step clickable.
  • Keep labels short and meaningful.
  • Use symbols to clearly seperate individual links in the breadcrumb trail.
  • Place breadcrumbs consistently, typically at the top left-hand of the page, below the header, and above the page title.
  • Show the full path on a single line. On mobile, the breadcrumbs can collapse to drop down menu, or similar device.
  • Truncate very long breadcrumb trails by providing a clear control for expanding the hidden path sections
  • Where required, truncation should be applied to the beginning of the breadcrumb trail. i.e,. the point furthest from the users current location.

Accessibility notes

  • Use semantic “nav” with aria-label=”breadcrumb”.
  • Ensure sufficient contrast between links.
Can’t find what you’re looking for? Get in touch