Sommaire

Le fil d’Ariane

Lorsque vous avez un site web contenant de très nombreuses pages hiérarchiques, il est très intéressant d’afficher un fil d’Ariane, afin que les visiteurs sachent où ils se situent dans l’architecture du site et afin qu’ils puissent revenir facilement et rapidement dans les pages précédentes.

Le fil d’Ariane est inséré dans un élément <nav>. Les pages sont dans un élément <ul> utilisant la classe breadcrumbs. Chaque page est placée dans un élément <li> incluant un élément <a> pour créer le lien vers la page souhaitée. Si vous souhaitez afficher une page ayant le "statut" désactivé, ajoutez la classe disabled. Pour mettre en forme de manière particulière la page active, insérez un élément <span> avec la classe show-for-sr.

Voici le code de cet exemple :

<nav aria-label="Vous êtes ici :" role="navigation"> 
  <ul class="breadcrumbs"> 
     <li><a href="#">Accueil</a></li> 
     <li><a href="#">Projets</a></li> 
     <li class="disabled">Equipe</li> 
     <li> 
       <span class="show-for-sr">Current: </span> Photographe 
     </li>  ...