VOOZH about

URL: https://mui.com/material-ui/react-breadcrumbs/

⇱ React Breadcrumbs component - Material UI

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.

<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 to start editing

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

Condensed with menu

As an alternative, consider adding a Menu component to display the condensed links in a dropdown list:

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>
Press to start editing

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.

API

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