Fil d'Ariane (breadcrumb)
La navigation avec un fil d'Ariane (breadcrumb) permet à un·e utilisateur·ice de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.
Exigences
Afficher la hiérarchie du site en affichant des liens en ligne, avec un séparateur entre les éléments, indiquant la hiérarchie entre les pages, la page courante apparaissant en dernier.
Recette
Cliquez sur « Exécuter » dans les blocs de code ci‑dessous pour éditer l'exemple dans le MDN Playground :
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li><a href="#">Accueil</a></li>
<li><a href="#">Catégorie</a></li>
<li><a href="#">Sous-catégorie</a></li>
<li><a href="#">Type</a></li>
<li><span aria-current="page">Produit</span></li>
</ol>
</nav>
body {
font: 1.2em sans-serif;
}
.breadcrumb {
padding: 0 0.5rem;
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
align-items: end;
}
.breadcrumb li:not(:last-child)::after {
display: inline-block;
margin: 0 0.25rem;
content: "→";
}
Note :
L'exemple ci‑dessus utilise un sélecteur complexe pour insérer du contenu avant chaque li sauf le dernier. Cela peut également être réalisé en ciblant tous les éléments li sauf le premier :
.breadcrumb li:not(:first-child)::before {
content: "→";
}
Choisissez la solution que vous préférez.
Choix effectués
Pour afficher les éléments de la liste en ligne, nous utilisons la mise en page flexbox, montrant ainsi comment une ligne de CSS peut fournir notre navigation. Les séparateurs sont ajoutés via le contenu généré CSS. Vous pouvez les remplacer par n'importe quel séparateur de votre choix.
Problèmes d'accessibilité
Nous utilisons les attributs aria-label et aria-current pour aider les technologies d'assistance à comprendre cette navigation et la position de la page courante dans la structure. Consultez les liens associés pour plus d'informations.
Notez que les flèches séparatrices → ajoutées via la propriété CSS content dans l'exemple ci‑dessus sont exposées aux technologies d'assistance (TA), y compris les lecteurs d'écran et les afficheurs braille. Pour une solution moins intrusive, utilisez une <img> décorative dans votre HTML avec un attribut alt vide. Un role ARIA défini sur none ou presentation évitera également que l'image soit exposée aux TA.
Alternativement, rendez muet le contenu généré CSS en incluant une chaîne vide comme texte alternatif, précédée d'un slash (/) ; par exemple : content: url("arrow.png") / "";.
Si vous incluez des séparateurs générés qui seront exposés aux TA, optez pour la création du contenu généré en utilisant le sélecteur pseudo-élément ::after au lieu de ::before, afin que le contenu du séparateur soit annoncé après le contenu HTML plutôt qu'avant.