🎉 Material UI v4 is out now! Check out the announcement blog post →
Breadcrumbs

Breadcrumbs

Breadcrumbs allow users to make selections from a range of values.

Simple breadcrumbs

Custom separator

In the following examples, we are using two string separators, and an SVG icon.



Breadcrumbs with icons

Collapsed breadcrumbs

Customized breadcrumbs

If you have been reading the overrides documentation page but you are not confident jumping in, here is one example of how you can change the breadcrumb link design.

Accessibility

Be sure to add a aria-label description on the Breadcrumbs component.

The accessibility of this component relies on:

  • The set of links is structured using an ordered list (<ol> element).
  • To prevent screen reader announcement of the visual separators between links, they are hidden with aria-hidden.
  • A nav element labeled with aria-label identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.

Integration with react-router