Breadcrumb Patterns
Breadcrumb Rules
- Show the full path from root to current page.
- Each level except current is a link.
- Current page: bold text, not a link.
- Separator: "/" or ">" between levels.
- Truncate middle levels for deep hierarchies: Home / ... / Category / Product.
- Mobile: show only parent level as a back link ("← Category").
When to Use
- Sites with 3+ levels of hierarchy.
- E-commerce (Home > Category > Subcategory > Product).
- Documentation (Docs > Section > Page).
- File managers.
When NOT to Use
- Flat sites with only 1-2 levels.
- Apps where navigation is primarily lateral (tabs).
- Single-page applications with no hierarchy.