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.
Active last breadcrumb
Keep the last breadcrumb interactive.
Custom separator
In the following examples, we are using two string separators and an SVG icon.
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.
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-labelidentifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
Toolpad (Beta)
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.