Bootstrap 4 Navigation par fil d'Ariane
La navigation par fil d'Ariane est un moyen d'afficher des informations en fonction de la hiérarchie du site web. En prenant un blog comme exemple, la navigation par fil d'Ariane peut afficher la date de publication, la catégorie ou les étiquettes. Ces éléments représentent la position de la page actuelle dans la hiérarchie de navigation et servent d'aide à la navigation dans l'interface utilisateur.
La navigation par fil d'Ariane dans Bootstrap est une simple liste non ordonnée avec la classe.breadcrumb. Les séparateurs sont ajoutés via ::before et content en CSS (bootstrap.min.css), et la classe indiquée ci-dessous est automatiquement ajoutée :
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
color: #6C757D;
content: "/";
}
Exemple de navigation par fil d'Ariane avec Bootstrap 4
<ol class="breadcrumb">
<li class="breadcrumb-item active">Accueil</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Accueil</a></li>
<li class="breadcrumb-item active">Bibliothèque</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Accueil</a></li>
<li class="breadcrumb-item"><a href="#">Bibliothèque</a></li>
<li class="breadcrumb-item active">Données</li>
</ol>
Essayez-le »
Nous pouvons également le faire sans utiliser la forme de liste :
Exemple de navigation par fil d'Ariane avec Bootstrap 4
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Accueil</a>
<a class="breadcrumb-item" href="#">Bibliothèque</a>
<a class="breadcrumb-item" href="#">Données</a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
Essayez-le »