Why?

It helps identify where the user is, and the navigation they may have taken to get to the current page.

Usage

  • Use a nav element
  • use an aria-label attribute to describe the breadcrumbs
  • use .visually-hidden to only show the 'you are here' label to screen readers.
  • use schema.org microdata{:target="_blank"} for BreadcrumbList and ListItem.

Variants

There's only 1 variant of breadcrumbs: