What is Breadcrumb?

Breadcrumbs show the user's current location in a hierarchy and provide links back to parent levels. Format: Home > Category > Subcategory > Current Page. Helps users understand where they are and navigate back up. Essential for deep hierarchies (3+ levels).

When Should You Use This?

Use breadcrumbs for hierarchical sites with 3+ levels: e-commerce (category > subcategory > product), documentation (section > page), file systems, large content sites. Don't use on flat sites with <3 levels or when there's only one path to content. Place breadcrumbs at top of page, above main heading.

Common Mistakes to Avoid

• •Using on flat sites—breadcrumbs need hierarchy; if you only have 2 levels, skip them
• •Not making them clickable—every level except current should be a link
• •Too many levels—if showing >5 levels, truncate middle levels (Home > ... > Parent > Current)
• •Inconsistent with actual hierarchy—breadcrumbs should match your IA, not browser history
• •Poor mobile layout—long breadcrumbs overflow on mobile; truncate or show only parent

Real-World Examples

• •Amazon—Category > Subcategory > Product breadcrumbs on every product page
• •Notion—page hierarchy in top bar (clickable path to current page)
• •GitHub—Org > Repo > Folder > File breadcrumbs in file browser
• •Google Search—URL breadcrumbs in search results