Breadcrumbs

Updated 2026-05-14

Confidence anatomy medium variants medium motion high a11y high content high

Overview

Use to show the user’s current location within a hierarchical multi-level structure. Enables 1-click navigation back to parent pages.

1
Container
the navigation region — typically a landmark role (nav/banner)
2
Items
individual navigable entries; one is marked "current" when applicable
3
Item label
short, scannable text; never sentence case
4
Item icon (optional)
reinforces meaning at a glance; not a substitute for label
5
Active indicator
visual treatment for the current item — underline, bar, fill, or background
6
Trigger (optional)
opens a dropdown/menu for grouped or contextual items

Type
`Default`

hover/focus transitions on items stay subtle — no large translation

dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button