Breadcrumb

Navigation to reveal a page’s location within the site hierarchy

Default

Complete breadcrumb string with all items visible.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Truncated

Long breadcrumb path shortened to display the last 2 items with hidden links indicated by ellipsis.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Indicate the current page location within a hierarchy using breadcrumbs
  • Do not include the current page in breadcrumb path because the aria-current attribute is not defined for the last item

This component has compliance with WCAG guidelines by:

  • Using text color with a Level AA contrast ratio of 4.5:1 contrast between the text color and the background but only when displayed on light backgrounds
  • Defining the attribute aria-label=’Breadcrumb’ in the <nav> element to identify the structure of cdr-breadcrumb as a breadcrumb path for assistive technologies
  • Defining that the ellipsis button contains the aria-expanded=’false’ attribute when the user has the ability to expand the breadcrumb path