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 : 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. Cours précédent                                                                    Cours suivant Voir la table des matières J’envoie régulièrement des astuces et techniques peu connus sur le développement web à un groupe privé de personnes… Je leur envoie des contenus gratuits, des tutoriels sur Bootstrap et ils bénéficient aussi de mes propres créations (thèmes premiums, composants et éléments d’interface). Ils sont aussi mis au courant dès que les thèmes premiums et plugins premiums sont au tarif promotionnel sur les meilleures marketplaces. Une fois inscrit, tu reçois gratuitement  mon livre Prise en main de Bootstrap 4 et un thème premium. Clique ici pour rejoindre le groupe privé et bénéficier de tous ces avantages.