Breadcrumbs
Trail of links showing the user's current location in the app hierarchy — with icons, custom separators, truncation, and dropdowns.
Basic
Text-only with chevron separators
With Icons
Each segment can carry an icon
Custom Separators
Chevron, slash, dot, arrow
chevron
slash
dot
arrow
With Truncation
Long paths collapse with a ••• overflow button
Click the button to expand the full path. Useful for deeply nested routes.
With Dropdown
Last parent shows a sibling-pages dropdown
The chevron next to a parent reveals sibling pages.
Sizes
sm, md, lg on a single hierarchy
Dark Surface Demo
Rendered on a dark panel for contrast
LiveLast updated 2 minutes ago
Anatomy & Tips
What makes a great breadcrumb
Hierarchy
Show the path from root → current. Never show siblings or future steps.
Last item
The current page is never a link — render it as bold text in the page's text color.
Truncation
For paths deeper than 4 levels, collapse middle crumbs behind a ••• button.
Accessibility
Always set aria-label="Breadcrumb" on the nav.