Skip to content

Breadcrumbs

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

Basic breadcrumbs

<Breadcrumbs aria-label="breadcrumb">
  <Link color="inherit" href="/" onClick={handleClick}>
    Material-UI
  </Link>
  <Link
    color="inherit"
    href="/getting-started/installation/"
    onClick={handleClick}
  >
    Core
  </Link>
  <Typography color="textPrimary">Breadcrumb</Typography>
</Breadcrumbs>

Active last breadcrumb

Keep the last breadcrumb interactive.

Custom separator

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

Breadcrumbs with icons

Collapsed breadcrumbs

<Breadcrumbs maxItems={2} aria-label="breadcrumb">
  <Link color="inherit" href="#" onClick={handleClick}>
    Home
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    Catalog
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    Accessories
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    New Collection
  </Link>
  <Typography color="textPrimary">Belts</Typography>
</Breadcrumbs>

Customized breadcrumbs

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

Integration with react-router

Accessibility

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#breadcrumb)

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.

Bottom Navigation
Was this page helpful?
Drawer
Thanks for your feedback!

Please let us know what we could do to improve this page.