breadcrumb-navigation
Use when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb navigation. Validate the final browser-facing markup, not just the source framework abstraction.
Informations de source
- Dépôt
- thedaviddias/Front-End-Checklist
- Dernière activité de la source
- 9 juin 2026 à 20:15
- Langue détectée de SKILL.md
- anglais
- Étoiles
- 74 155
- Forks
- 6 739
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Explorateur de fichiers
2 fichiersAffichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- name
- breadcrumb-navigation
- description
- Use when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb navigation. Validate the final browser-facing markup, not just the source framework abstraction.
- metadata
- {"category":"html","priority":"medium","difficulty":"beginner","estimatedTime":"15","source":"frontendchecklist.io","url":"https://frontendchecklist.io/en/rules/html/breadcrumb-navigation"}
# Implement accessible breadcrumb navigation
Proper breadcrumb markup helps screen reader users understand site hierarchy and their current location, while also improving SEO through structured data.
## Quick Reference
- Use nav element with aria-label='Breadcrumb'
- Use ordered list (ol) for semantic structure
- Mark current page with aria-current='page'
- Keep any structured data aligned with the visible breadcrumb trail
## Check
Verify breadcrumbs use nav element with aria-label, ordered list markup, and aria-current for the current page.
## Fix
Implement breadcrumbs using semantic nav, ol/li structure, and proper ARIA attributes including aria-current='page'.
## Explain
Explain how properly marked up breadcrumbs improve navigation, SEO, and screen reader accessibility.
## Code Review
Review templates, server-rendered HTML, and shared components that output markup related to Implement accessible breadcrumb navigation. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.
---
For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.
Rule page: https://frontendchecklist.io/en/rules/html/breadcrumb-navigation
Voir sur GitHub