Breadcrumb

A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users understand their location within a site and navigate back to previous levels.

Breadcrumbs can be used on sites with deep, hierarchical structures where users may arrive at a page via search or external links. They are less useful on flat sites where the main navigation already covers all pages.

Accessibility Features

  • A <nav> landmark with aria-label="Breadcrumb" identifies the breadcrumb trail as a specific navigation region.
  • aria-current="page" on the last item identifies it as the currently active page.
  • <ol> identifies the breadcrumb trail as a list of links and communicates the total number of links to screen readers.
  • Separators between the links are purely decorative and should be hidden from screen readers.

Example

Code Snippet