Le fil d’Ariane COMPOSANTS D’INTERFACE:Fil d’Ariane

Le fil d’Ariane est un élément très commun dans les interfaces des sites web. Il permet aux visiteurs du site de savoir quelle est la page active et quel est le chemin parcouru pour y parvenir.

Le dossier à télécharger pour cet exemple est nommé 08-Interface-08.

Voici le code très simple utilisé :

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

Voici l’affichage obtenu :

images/C08-029.png

C’est un élément <nav> qui est utilisé. La liste des pages parcourues est placée dans un élément <ol>, avec la classe .breadcrumb. Chaque page est placée dans un item de la liste, <li>, avec la classe dédiée .breadcrumb-item. La page active, celle qui est affichée dans le navigateur du visiteur, a en plus la classe .active.

Dans le fil d’Ariane...

Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les bulles d'aide élaborées
Suivant
La pagination