ui patterns
Breadcrumbs
What are breadcrumbs?
Breadcrumbs are the small trail of links - like Home > Catalogue > Shoes - that show your current position in the hierarchy and let you navigate back up. They quietly answer two questions: where am I, and how do I get back?
Also known as: breadcrumb trail, breadcrumb navigation
Prefer to watch?
Watch the recap 0:36
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.
Breadcrumbs are the small trail of links - like Home > Catalogue > Shoes - that show your current position in the hierarchy and let you navigate back up. They quietly answer two questions: where am I, and how do I get back? So add them to deep, nested structures where people can otherwise lose their bearings.
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.
Try the interactive demo on site:uxbyexample.co.uk to see how breadcrumbs guide users through nested pages without relying on static images or third-party tools. This page’s hands-on example lets you test breadcrumb behaviour directly - no screenshots, no external apps - just pure UX in action.
You can test how breadcrumbs work live on site:uxbyexample.co.uk - no screenshots, just an interactive demo you can play with. This page’s hands-on example lets you see how breadcrumbs answer ‘where am I’ and ‘how do I get back’ in real time.