Back to Glossary

Breadcrumb

Synonyms: breadcrumb trail, breadcrumb navigation, location trail, secondary navigation, wayfinding trail

Do not index

Definition

A breadcrumb is a secondary navigation trail that shows where a user sits in a site's hierarchy and lets them jump back up, like Home > Electronics > Laptops > This Page. It's named after the Hansel and Gretel trail. It supports wayfinding (knowing where you are) and gives quick upward navigation, which is why it matters for information architecture and overall navigation.

Use cases

Skip them on a deep site and users who land mid-hierarchy have no idea where they are.
  • Deep landings from search: Someone arrives on a product page directly from Google with no sense of context. A breadcrumb tells them they're in Electronics > Laptops and lets them browse up to the category.
  • Lost in a big content site: On large docs or e-commerce sites, users dig several levels deep and can't easily climb back out. Breadcrumbs give them the ladder.
  • SEO and search appearance: With breadcrumb structured data, Google can show the trail in results, which helps users understand the page before they click.

How it's used in practice

  • Use location-based, not path-based: Reflect the site's IA hierarchy, not the click history. History trails get long, repetitive, and break for deep-link arrivals.
  • Place them right: Put the trail near the top, just below the global nav and above the page title, kept small and secondary.
  • Link every level but the last: Make each ancestor a working link; the current page is plain text, not a link.
  • Add structured data: Mark up the trail with schema.org BreadcrumbList code (usually a small snippet, often auto-added by your CMS or SEO plugin). Users never see it, but it lets Google show the breadcrumb trail in search results instead of the raw URL. Just keep the markup matched to the visible trail.
🪄
Pro-tip: Breadcrumbs are for deep hierarchies, not shallow ones. On a flat two-level site they add clutter without payoff.
Always use location-based (your IA), never path-based, which just duplicates the back button and breaks on revisits. And treat them as a supplement: if users have to rely on breadcrumbs to get around, your primary navigation is broken.

Challenges & limitations

  • Mobile space: Long trails wrap or truncate on small screens, so they need careful collapsing or shortening.
  • Messy information architecture: Breadcrumbs only work when the hierarchy is clear. If content lives in multiple categories or the structure keeps changing, the trail becomes inconsistent and users stop trusting it.

Free resources

 
notion image

Share this post

Get free UX resources

Get portfolio templates, list of job boards, UX step-by-step guides, and more.

Download for FREE
 
 
 

The best email 📮 for growing 🌱 designers

 
Honest notes about the work behind the work. Read in 2 minutes, weekly. Free forever.
 
 
     
    notion image
     
    Join 13,045 designers and get tactics, hacks, and tips.