How they help
Breadcrumbs in a UI enhance navigation by showing users their current position within the site hierarchy and allow quick access to higher-level pages, reducing the need for repeated backtracking. They improve user experience by providing orientation, reducing clicks, and offering visual clarity.
Example of a breadcrumb
Anatomy
- Icon: optional visual to help give clarity to user
- Breadcrumb item
- Divider: optional visual to provide spacing between items
- Current page
Variants
There are 3 variants of the component: text only, with icon and with divider. Default is with divider.
Designer resources