ui patterns
Breadcrumbs
What are breadcrumbs?
Breadcrumbs are the small trail of links - Home > Catalogue > Shoes - that shows where the current page sits in the hierarchy and lets you step back up it. They answer two quiet questions at once: where am I, and how do I get back?
Also known as: breadcrumb trail, breadcrumb navigation
The demo
A product page buried five levels down. Toggle the trail and feel the difference between knowing where you are - and not. With it on, click a crumb to step back up.
Trail Runner GTX
A waterproof trail shoe. (The page you're on.)
Turn the trail on to see where this page lives.
What this demo shows (text version)
A product page ("Trail Runner GTX") that sits five levels deep in a shop: Home > Catalogue > Shoes > Running > Trail Runner GTX. With breadcrumbs off, the page shows only its title, so there is no indication of where it sits or an easy way back up the hierarchy.
With breadcrumbs on, the trail appears above the title, each level a link except the current page, and clicking a level steps back up to it. The demonstration is that breadcrumbs answer "where am I?" and "how do I go up?" in a single line - valuable on deep, hierarchical sites, unnecessary on flat ones.
Without the trail you were deep in the site with no sense of where, and no quick way up but the browser back button. Switch it on and your location and your escape routes appear together in one line. That orientation is the whole job - breadcrumbs are a map pin and a staircase in the same small strip of text.
Breadcrumbs earn their place on deep, hierarchical sites - shops, docs, big catalogues - where pages nest several levels down. They are close to useless on a flat site with no hierarchy to trace, and they are a supplement to primary navigation, never a replacement for it. If your site is two levels deep, you probably don't need them.
Show the path, not the history. A breadcrumb should reflect where the page sits in the structure (Home > Shoes > Running), the same for everyone, not the wandering route a particular visitor took to get there - that is what the back button is for. And the last crumb, the current page, is a label, not a link.