Les Breadcrumbs affichent le chemin de l’accueil à la page courante et accélèrent les retours aux sections parentes.
Que sont les Breadcrumbs ?
Navigation secondaire : liste ordonnée de liens séparés par des glyphes (p. ex. >, flèches).
Pourquoi utiliser les Breadcrumbs ?
- Orientation : voir la hiérarchie d’un coup d’œil
- Technologies d’assistance : nav sémantique + liste structurée + schéma optionnel
- SEO : données structurées BreadcrumbList si activé
- WCAG : soutient 2.4.5 (plusieurs façons), 2.4.8 (emplacement), 3.2.3 (navigation cohérente — lorsque le placement est stable)
- Moins de clics : remonter sans réutiliser le menu principal en boucle
Notes WCAG
- 2.4.5 Plusieurs façons : repérage supplémentaire au-delà de la nav principale
- 2.4.8 Emplacement : montre où vous êtes dans le site
- 3.2.3 Navigation cohérente : gardez un emplacement prévisible pour les Breadcrumbs
Intégration
Option 1 — PHP (thème)
<?php
if ( function_exists( 'wcag_breadcrumbs' ) ) {
wcag_breadcrumbs();
}
?>Option 2 — Shortcode (constructeurs)
[wcag_breadcrumbs]Réglages
- Activer : bascule globale
- Libellé ARIA : p. ex. « Fil de navigation »
- Classe CSS sur
<nav>: par défautwcag-breadcrumbs - Texte d’intro : préfixe optionnel (p. ex. « Vous êtes ici : »)
- Mise en page de l’intro : bloc au-dessus vs en ligne
- Entrée de la page d’accueil : texte uniquement, l’une des quatre icônes Lucide fournies uniquement (maison, maison avec cœur, immeuble de bureaux ou porte ouverte), ou une icône suivie d’un texte visible
- Libellé de la page d’accueil : texte visible du lien ou nom accessible de l’icône sélectionnée ; par défaut « Home ». Dans l’affichage combiné, l’icône décorative précède le texte dans le même lien d’accueil et utilise la marge correspondante du séparateur pour ordinateur ou mobile.
- Affichage de la page actuelle : afficher le dernier Breadcrumb comme texte sans lien ou avec lien
- Seuil mobile : p. ex. 500 px pour styles compacts
Séparateurs : choisissez séparément pour ordinateur et mobile entre un caractère et l’une des sept icônes Lucide : Chevron, Double chevron, Flèche, Barre oblique, Ligne horizontale, Cercle ou Losange. La taille des icônes pour ordinateur et mobile peut être réglée séparément entre 8 et 48 pixels. Les icônes mobiles peuvent pivoter de 0°, 90°, 180° ou 270° ; la valeur par défaut est 0°. Les icônes directionnelles sont inversées pour le contenu de droite à gauche sur ordinateur. Les marges et la couleur du séparateur/de l’icône s’appliquent aux deux modes.
Typographie et liens : tailles des Breadcrumbs réglables séparément pour ordinateur et mobile avec les unités rem, em, px ou % (valeur par défaut : 1rem), interligne, espacement intérieur partagé des éléments de liste sur ordinateur et mobile, espacement intérieur partagé des liens en pixels (zone de clic), couleurs par défaut / Hover / page actuelle, décoration + Hover. La première entrée mobile ne reçoit pas d’espacement intérieur supplémentaire à gauche. Lors du changement d’unité, la valeur est convertie de manière transparente sur une référence de 16px ; em et % peuvent s’afficher différemment selon le contexte du thème. rem est recommandé, car il suit la taille de police racine du site web ; les valeurs CSS avancées telles que clamp() restent disponibles. Les libellés longs passent à la ligne au lieu d’être tronqués par des points de suspension.
Alignement : gauche / centre / droite par bureau et mobile. Dans la disposition mobile empilée, les séparateurs restent directement associés à leur libellé lorsque l’alignement est centré ou à droite, et les icônes restent centrées verticalement sur la ligne de texte. Les libellés mobiles centrés partagent l’axe central de l’entrée d’accueil, quelle que soit la taille ou la marge du séparateur.
Aperçu en direct
Les réglages séparent le contenu et le comportement, l’aperçu, l’apparence, la mise en page adaptative et les options techniques dans des cartes claires et non numérotées. Les contrôles mobiles et avancés sont directement disponibles, sans niveau dépliable supplémentaire, dans la carte Mise en page adaptative.
L’aperçu toujours visible se met à jour avec les options, alterne entre les largeurs ordinateur et mobile, simule les états standard, Hover et focus clavier, et affiche le HTML généré à la demande. Il utilise toute la largeur de sa propre carte d’aperçu sur ordinateur et mobile.
Exemples
Exemple 1 : défaut
Activez les Breadcrumbs avec le séparateur ⤏ et un alignement à gauche ; placez-les sous l’en-tête du site via PHP.
Exemple 2 : minimal
Simple >, police plus petite, couleurs atténuées, intro en ligne.
Exemple 3 : fort emphase
Séparateur flèche, police plus grande, fort contraste, intro sur sa propre ligne.
Exemple 4 : mobile d’abord
Glyphe mobile compact (⋮), espacement resserré, centré sur petits écrans.
Conseils
- Gardez un placement cohérent sur tout le site
- Utilisez l’aperçu pour ajuster l’espacement
- Testez les seuils
- Respectez le contraste des liens (1.4.3)
- Choisissez des séparateurs lisibles comme séparateurs, pas comme contenu
- Surchargez via le CSS du thème sur la classe enveloppe
- La page courante est en général non-lien + aria-current= »page »
- Vérifiez avec un lecteur d’écran
Notes techniques
<nav>+<ol>- Schema.org BreadcrumbList lorsque la sortie inclut du JSON-LD (selon les réglages de l’extension)
- Élément courant marqué avec aria-current= »page »
- Styles en ligne générés ; le thème peut surcharger
- Pas de JavaScript requis pour le rendu
Disponible pour : tous les plans Free