A secondary navigation element that shows a user's current location within a website or application hierarchy. Breadcrumbs (e.g., Home > Products > Shoes) help users orient themselves and navigate back to parent sections without using the browser's back button.
Common contexts
- Adding breadcrumbs to a deep e-commerce category page so users can step back through filters
- Providing location context in a multi-level settings panel where users often get disoriented
- Surfacing breadcrumbs on search result landing pages where users arrive mid-hierarchy from Google
Use when
Add breadcrumbs when users frequently navigate to pages three or more levels deep, especially if those pages can be reached from external links or search engines rather than always traversed from the homepage. They matter most when users need to understand where they are relative to a larger catalog or structure.
Avoid when
Breadcrumbs add visual noise and confusion on single-level sites or apps with flat navigation structures — they imply a hierarchy that doesn't exist and teach users to look for context that isn't there. Never add breadcrumbs as a compensatory fix for a navigation system that fundamentally doesn't communicate structure well.
If users frequently say 'I didn't know where I was' in usability testing but the breadcrumb is visible, the problem isn't the breadcrumb's presence — it's the information architecture it's trying to describe.
Real-world examples
- Amazon displays a horizontal breadcrumb trail (e.g., 'Electronics > Cameras > Digital Cameras') at the top of product pages, helping users navigate back up the category hierarchy.
- Google Search results pages include breadcrumbs extracted from page structure to show users the site hierarchy of each result.
- IKEA's website uses breadcrumbs on product pages to show the category path (e.g., 'Home > Bedroom > Beds > Bed frames'), reducing pogo-sticking back to category pages.