Réaliser un breadcrumb avec Bootstrap4

Le breadcrumb est un outil de navigation qui présente l’organisation d’un site et permet de naviguer facilement entre les pages. Grâce au breadcrumb le visiteur de votre site connait les pages web qui sont les parents directs  de la page sur laquelle il se trouve.

Le breadcrumb que nous pourrons appelés en français dans notre circonstance le fil de la navigation a un double avantage, le premier avantage est qu’il est un composant graphique qui lorsqu’il est présent sur une page web apporte un charme particulier à cette page et le second avantage est qu’il rend l’expérience utilisateur fascinante car il est à la fois source d’information et d’assistance pour un internaute.

Maintenant nous allons voir comment procéder pour réaliser un breadcrumb à l’aide Bootstrap4.

  • Il faut utiliser l’une des balises HTML permettant de créer une liste pour créer votre breadcrumb, vous pouvez utiliser soit la balise dl, soit ul ou encore la balise ol.
  • Attribuez à la balise la classe .breadcrumb
  • Tous les éléments du breadcrumb doivent porter un lien menant vers leur page respective sauf l’élément présentant la page sur laquelle l’on se trouve

Exemple : Nous allons réaliser un breadcrumb en dessous de la barre de navigation que nous avons créé dans la leçon précédente

<ol class="breadcrumb">
   <li class="p-1">Accueil</li>
   <li class="p-1"><a href="#">A propos</a></li>
   <li class="p-1"><a href="#">Blog</a></li>
   <li class="p-1"><a href="#">Contact</a></li>
</ol>

Résultat :

Breadcrumb

Vous pouvez styliser votre breadcrumb en incorporant au milieu des éléments du breadcrumb une petite icône comme dans l’exemple de l’interface du thème Photofan ci-dessous.

Entête du thème Photofan

Cours précédent                                                                    Cours suivant

Voir la table des matières

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.