Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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"> <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 chaqueli sauf le dernier. Cela peut également être réalisé en ciblant tous les élémentsli 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 lamise en page flexbox, montrant ainsi comment une ligne de CSS peut fournir notre navigation. Les séparateurs sont ajoutés via lecontenu généré CSS. Vous pouvez les remplacer par n'importe quel séparateur de votre choix.
Problèmes d'accessibilité
Nous utilisons les attributsaria-label etaria-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é CSScontent 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 attributalt vide. Unrole ARIA défini surnone oupresentation évitera également que l'image soit exposée aux TA.
Alternativement, rendez muet lecontenu 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.