# Breadcrumb Patterns

> Breadcrumb navigation, path display, and hierarchical wayfinding design.

- Skill: `dragoon0x/breadcrumb-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/breadcrumb-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/breadcrumb-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/breadcrumb-patterns

---


# 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.