A breadcrumb trail is a navigational tool that helps users keep track of their location within an app.
The Breadcrumbs component consists of a list of links that show the user the hierarchy of a given page in relation to the app's structure. It provides a simple visual aid for better context and ease of navigation between higher- and lower-level pages.
<Breadcrumbs> <Link /> ... </Breadcrumbs>
import Breadcrumbs from '@mui/joy/Breadcrumbs';
The Breadcrumbs component acts as a wrapper for navigation links. It's designed to be used with the Link and Typography components, as shown below:
By default, the Breadcrumbs component inserts a forward slash (/) between each navigation item.
separator prop to define a custom separator, which can be a character or a symbol as well as an icon:
import Link from '@mui/joy/Link';
import Typography from '@mui/joy/Typography';
The Breadcrumbs component doesn't accept common Joy UI style props like
endDecorator—but Link and Typography do.
As such, most custom styles that affect the content should be applied directly to those components rather than Breadcrumbs.
The demo below shows how to add an icon to the Link with
startDecorator and change the color with the
Play around with the CSS variables available to the Breadcrumbs component to see how the design changes.
You can use these to customize the component with both the
sx prop and the theme.
When the page hierarchy is deeply nested, you may want to condense multiple levels into one. The demo below only displays a few previous levels until you click the ellipsis to show the full hierarchy:
import Menu from '@mui/joy/Menu';
As an alternative to the behavior of the condensed demo above, consider adding a Menu component to display the condensed links in a dropdown list:
Be sure to add an informative
aria-label description to the Breadcrumbs component.
The following features are included to optimize the component's baseline accessibility:
- The set of links is structured using an ordered list (
- Visual separators between links are hidden with
aria-hiddento prevent screen readers from announcing them.
<nav>element with an
aria-labelidentifies the structure as a breadcrumb trail and makes it a navigation landmark so that it's easy to locate with assistive technology.
- The link to the current page has
The Breadcrumbs component is composed of a root
<nav> that wraps around an
<ol>, with list items corresponding to the trail of links and their separators:
<nav aria-label="breadcrumbs" class="MuiBreadcrumbs-root"> <ol class="MuiBreadcrumbs-ol"> <li class="MuiBreadcrumbs-li"> <!-- Link or Typography --> </li> <li aria-hidden="true" class="MuiBreadcrumbs-separator">/</li> <li class="MuiBreadcrumbs-li css-1rqbcrs-MuiBreadcrumbs-ol"> <!-- Link or Typography --> </li> </ol> </nav>
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.