Breadcrumb
A navigation component showing the hierarchical location of the current page
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsWrap in a <nav> landmark
The breadcrumb must be wrapped in <nav aria-label="Breadcrumb"> to be identified as a navigation landmark.
aria-current="page" on current item
The last item representing the current page must have aria-current="page".
Use an <ol> list structure
Breadcrumb items must be structured as an ordered list (<ol>) to convey their sequence.
Make separators aria-hidden
Visual separators (/ or ›) should have aria-hidden="true" to prevent them from being announced.
Render last item as text, not a link
The current page item should be plain text, not a link, since it points to the current page.
Do not list items with div/span alone
Using div or span without list semantics loses the ordered structure for screen reader users.
Do not include separators in link text
Including "/" in the link text itself will be read aloud by screen readers.
Additional checks
Specify aria-label directly
MUI Breadcrumbs does not add an accessible name by default. Add aria-label="Breadcrumb" to the component.
Code sample
Implementation notes
- –MUI Breadcrumbs automatically renders separators with aria-hidden applied.
- –The separator prop allows customizing the separator.
- –Render the last item as Typography (not a link) to indicate the current page.