Breadcrumbs show a trail of links from the root to the current page. Use them at the top of detail pages, settings panels, or anywhere the user needs to see where they are and navigate back up.
ts
| Guidance | Practices |
|---|---|
| Do | Place breadcrumbs above the page heading so the user sees their location before reading the content. |
| Do | Keep labels short and match the page titles they link to: "Settings" not "Application Settings Page". |
| Do | Use the supporting variant in dense UIs like admin panels or sidebars where the breadcrumb should be subtle. |
| Do | Make the last item plain text, not a link; it represents the current page. The component does this automatically when you set isCurrent. |
| Don't | Use breadcrumbs as the primary navigation. They supplement a sidebar or top nav, not replace it. |
| Don't | Show breadcrumbs on top-level pages that have no parent; they add clutter without helping the user. |
| Don't | Let the trail grow beyond 5 levels. If you need more, consider simplifying the page hierarchy instead. |
Swap the default "/" for a different character like chevrons, arrows, or dots. Use when the visual style of the page calls for a different separator.
A 5-level breadcrumb trail for deeply nested content. Use in e-commerce, file browsers, or any UI with several levels of hierarchy.
Compare the default and supporting variants side by side. Use the supporting variant in dense UIs like admin panels where the breadcrumb should be subtle.
Add icons before breadcrumb labels for quick recognition. Use a home icon on the root item and contextual icons on key sections.