Source

Miette de pain

Indiquez l'emplacement de la page actuelle dans une hiérarchie de navigation qui ajoute automatiquement des séparateurs via CSS.

Aperçu

Les séparateurs sont automatiquement ajoutés en CSS via ::beforeet content.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Accessibilité

Étant donné que les fils d'Ariane fournissent une navigation, il est judicieux d'ajouter une étiquette significative telle que aria-label="breadcrumb"pour décrire le type de navigation fourni dans l' <nav>élément, ainsi que d'appliquer un aria-current="page"au dernier élément de l'ensemble pour indiquer qu'il représente la page actuelle.

Pour plus d'informations, consultez WAI-ARIA Authoring Practices for the breadcrumb pattern .