Breadcrumb
The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.
The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.
Overview
Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or to a previous step.
Breadcrumbs are very effective in products and experiences that have a large amount of content organized in a hierarchy of more than two levels. They are also highly effective in flows that contain multiple steps, operating in a similar way to a progress indicator. Breadcrumbs are always treated as secondary and should never entirely replace the primary navigation.
Breadcrumbs’ space-efficient design and high utility make them an easy choice for most designers.
Variations
| Breadcrumb type | Purpose |
|---|---|
| Location-based | These illustrate the site’s heirarchy and show the user where they are within that heirarchy. |
| Path-based | These show the actual steps the user took to get to the current page, rather than reflecting the site’s information architecture. Path-based breadcrumbs are always dynamically generated. |
Feedback
Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.