Breadcrumbs
UX Design
What are Breadcrumbs
Breadcrumbs are secondary navigation elements that show users their current location within a website's hierarchy. Named after Hansel and Gretel's trail of breadcrumbs, they provide users with an easy way to track and navigate back through their location path.
Types of Breadcrumbs
Three main types exist:
- Location-based: Shows hierarchical site structure
- Path-based: Displays user's navigation history
- Attribute-based: Shows metadata categories (common in e-commerce)
When to use Breadcrumbs
Implement breadcrumbs in complex, hierarchical websites with multiple levels of navigation. They're particularly valuable for e-commerce sites, documentation portals, and content-heavy platforms where users need clear context of their location.
How to implement Breadcrumbs
Place breadcrumbs consistently near the top of the page, use clear visual separators (often >/), ensure each level is clickable, and keep labels concise. Make them complementary to primary navigation, not a replacement.
Find your next job!
No, breadcrumbs are a supplementary navigation aid that should complement, not replace, the main navigation menu. They provide additional context and wayfinding support.
Not necessarily. Breadcrumbs are most useful on sites with hierarchical content and multiple levels of navigation. Single-level websites or those with flat architecture may not need them.
Breadcrumbs can improve SEO by helping search engines understand your site structure and providing additional internal linking. They also often appear in search results, making your site's hierarchy clear to users.
UX Design Terms
See more UX Design terms
Iterative Design
What is Iterative Design Iterative Design is a cyclical desig...
Mockup
What is a Mockup A Mockup is a static, high-fidelity represen...
Design Sprint
What is a Design Sprint A Design Sprint is a time-boxed proce...
Persona
What is a Persona A Persona is a fictional character that rep...
Whiteboard Challenge
What is a Whiteboard Challenge A Whiteboard Challenge is an i...
Quantitative User Research
What is Quantitative User Research Quantitative User Research...