Breadcrumb Patterns

Breadcrumb navigation, path display, and hierarchical wayfinding design.

dragoon0x 3b60c3c 802 B Updated

File contents

Breadcrumb Patterns

Breadcrumb Rules

  1. Show the full path from root to current page.
  2. Each level except current is a link.
  3. Current page: bold text, not a link.
  4. Separator: "/" or ">" between levels.
  5. Truncate middle levels for deep hierarchies: Home / ... / Category / Product.
  6. 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.

dragoon0x/everything-design-taste/tree/main/skills/breadcrumb-patterns commit 3b60c3c586

Frequently asked questions

npx skillmds@latest add dragoon0x/breadcrumb-patterns