# Breadcrumb Navigation

> Breadcrumb design, hierarchical navigation, and location indicators.

- Skill: `dragoon0x/breadcrumb-navigation` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/breadcrumb-navigation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/breadcrumb-navigation/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-navigation

---


# Breadcrumb Navigation

## Structure
Home > Category > Subcategory > Current Page

## Rules
1. Last item is current page (not clickable, styled differently)
2. Separator: / or > (not >>)
3. Don't use on flat sites (no hierarchy = no breadcrumbs)
4. Truncate long paths with ellipsis: Home > ... > Subcategory > Page
5. Mobile: show only parent level or collapse
6. Schema markup for SEO (BreadcrumbList)

## Accessibility
- Wrapped in `<nav aria-label="Breadcrumb">`
- Ordered list `<ol>` for semantics
- Current page marked with `aria-current="page"`
- Separators are decorative (CSS, not text)