Skip to content

Breadcrumbs

A breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors.

Basic breadcrumbs

<Breadcrumbs aria-label="breadcrumb">
  <Link underline="hover" color="inherit" href="/">
    MUI
  </Link>
  <Link
    underline="hover"
    color="inherit"
    href="/material-ui/getting-started/installation/"
  >
    Core
  </Link>
  <Typography sx={{ color: 'text.primary' }}>Breadcrumbs</Typography>
</Breadcrumbs>

<Breadcrumbs aria-label="breadcrumb">
  <Link underline="hover" color="inherit" href="/">
    MUI
  </Link>
  <Link
    underline="hover"
    color="inherit"
    href="/material-ui/getting-started/installation/"
  >
    Core
  </Link>
  <Typography sx={{ color: 'text.primary' }}>Breadcrumbs</Typography>
</Breadcrumbs>

Press Enter to start editing

Keep the last breadcrumb interactive.

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 separator="›" aria-label="breadcrumb">
  {breadcrumbs}
</Breadcrumbs>
<Breadcrumbs separator="-" aria-label="breadcrumb">
  {breadcrumbs}
</Breadcrumbs>
<Breadcrumbs
  separator={<NavigateNextIcon fontSize="small" />}
  aria-label="breadcrumb"
>
  {breadcrumbs}
</Breadcrumbs>

Press Enter to start editing

Breadcrumbs with icons

Collapsed breadcrumbs

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

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

Press Enter to start editing

Customization

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>

<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>

Press Enter to start editing

Integration with react-router

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/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.

Experimental APIs

Page Container

The PageContainer component in @toolpad/core is the ideal wrapper for the content of your dashboard. It makes the Material UI Container navigation aware and extends it with page title, breadcrumbs, actions, and more.

Orders

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.