Skip to content
Edit this page

Breadcrumbs

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

Basic breadcrumbs

<Breadcrumbs aria-label="breadcrumb">
  <Link color="inherit" href="/">
    Material-UI
  </Link>
  <Link color="inherit" href="/getting-started/installation/">
    Core
  </Link>
  <Typography color="text.primary">Breadcrumb</Typography>
</Breadcrumbs>

Active last breadcrumb

Keep the last breadcrumb interactive.

<Breadcrumbs aria-label="breadcrumb">
  <Link color="inherit" href="/">
    Material-UI
  </Link>
  <Link color="inherit" href="/getting-started/installation/">
    Core
  </Link>
  <Link
    color="text.primary"
    href="/components/breadcrumbs/"
    aria-current="page"
  >
    Breadcrumb
  </Link>
</Breadcrumbs>

Custom separator

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

<Breadcrumbs separator="›" aria-label="breadcrumb">
  {breadcrumbs}
</Breadcrumbs>
<Breadcrumbs separator="-" aria-label="breadcrumb">
  {breadcrumbs}
</Breadcrumbs>
<Breadcrumbs
  separator={<NavigateNextIcon fontSize="small" />}
  aria-label="breadcrumb"
>
  {breadcrumbs}
</Breadcrumbs>

Breadcrumbs with icons

Collapsed breadcrumbs

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

Customized breadcrumbs

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

<Breadcrumbs aria-label="breadcrumb">
  <StyledBreadcrumb
    component="a"
    href="#"
    label="Home"
    icon={<HomeIcon fontSize="small" />}
  />
  <StyledBreadcrumb component="a" href="#" label="Catalog" />
  <StyledBreadcrumb
    label="Accessories"
    deleteIcon={<ExpandMoreIcon />}
    onDelete={handleClick}
  />
</Breadcrumbs>

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