Skip to content


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

Simple breadcrumbs

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

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}>
  <Link color="inherit" href="#" onClick={handleClick}>
  <Link color="inherit" href="#" onClick={handleClick}>
  <Link color="inherit" href="#" onClick={handleClick}>
    New Collection
  <Typography color="textPrimary">Belts</Typography>

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



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.