Skip to content
Edit this page

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 

<Paper elevation={0} className={classes.paper}>
  <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>
</Paper>

Customized breadcrumbs

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

<Paper elevation={0} className={classes.root}>
  <Breadcrumbs aria-label="breadcrumb">
    <StyledBreadcrumb
      component="a"
      href="#"
      label="Home"
      icon={<HomeIcon fontSize="small" />}
      onClick={handleClick}
    />
    <StyledBreadcrumb component="a" href="#" label="Catalog" onClick={handleClick} />
    <StyledBreadcrumb
      label="Accessories"
      deleteIcon={<ExpandMoreIcon />}
      onClick={handleClick}
      onDelete={handleClick}
    />
  </Breadcrumbs>
</Paper>

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.

API