La création d’une barre de navigation basique avec Bootstrap 5 va être la première étape vers la construction de menu beaucoup plus complexe que nous verrons dans les leçons suivantes.
Dans cette leçon, nous apprendre à créer des barres de navigation composées de liens et cliquables et voir comment les positionner horizontalement (les uns à côté des autres) ou verticalement (les uns en dessous des autres).
Il est crucial que vous maîtrisiez bien cette première leçon avant de passer aux suivantes.
Les classes que nous allons voir dans cette leçon :
- navbar
- navbar-expand-*
- navbar-nav
- navbar-item
- navbar-link
- justify-content-center start / center / end
- navbar-brand
- navbar-dark
- navbar-light
- active
- disabled
Comment créer une barre de navigation avec des liens cliquables
Nous allons commencer par une barre toute simple, elle ne sera pas esthétique du tout, mais nous la ferons évoluer au fil des autres leçons.
En premier lieu, nous allons créer des balises header, ce n’est pas obligatoire, mais cela demeure une bonne pratique pour donner de la clarté à notre code.
Pour créer une barre de navigation nous allons utiliser les balises nav accompagnées de la classe navbar suivie d’un point de transition créé avec la classe navbar-expand-* à partir duquel la barre de navigation va placer les liens les uns en dessous des autres.
On va aussi mettre une couleur de fond gris clair à la barre de navigation avec la classe bg-light pour mieux la mettre en évidence. Nous verrons plus loin les différents choix de couleurs proposés par Bootstrap 5.
Pour ajouter des liens à l’intérieur de la barre de navigation, on va utiliser les balises et les classes suivantes
- <ul> avec la class= »navbar-nav« .
- <li> avec la classe nav-item
- <a> avec une classe nav-link
En dessous de 576px
Au-dessus de 576px
Aligner les liens de la barre de navigation
Par défaut, les liens sont alignés à gauche, mais il est possible de les aligner au centre ou à droite.
Pour ce faire, nous allons rajouter à la balise au conteneur (container) les classes suivantes :
justify-content-center : pour centrer les liens du menu.
justify-content-end : pour aligner les liens à droite.
Mettre en évidence un logo, une marque, un lien spécial dans la barre de navigation
La classe navbar-brand va permettre de mettre en évidence le nom du site, de placer un logo ou encore faire un lien qui se démarque des autres comme celui menant vers la page d’accueil par exemple.
Centrer verticalement un élément dans la barre de navigation Bootstrap 5
Dans l’exemple ci-dessus on voit que lien accueil n’est pas bien centré par rapport aux autres liens, pour remédier à cela on va lui rajouter une marge interne supérieure (padding) lorsque les éléments sont côte à côte c’est-à-dire dans notre exemple, sur une taille d’écran égale ou supérieur à 576 px (.sm).
Voir la leçon sur : les marges externes et internes dans Bootstrap 5.
Exemple avec un marge interne haute de 0.25rem à partir de 576px.
Sans marge interne haute
Avec marge interne haute
Comment changer la couleur de fond d’une barre de navigation créée avec Bootstrap 5 ?
Autre point appréciable, la possibilité de changer la couleur de la barre de navigation avec les classes de couleurs prédéfinies de Bootstrap 5.
Nous allons donc appliquer un background-color (bg) avec la classe de couleur désirée.
Pour rappel ces classes sont :
- bg-primary
- bg-success
- bg-info
- bg-warning
- bg-danger
- bg-transparent
- bg-secondary
- bg-dark
- bg-light
- bg-body
- bg-white
Il existe aussi les classes .navbar-dark et .navbar-light qui ont été spécialement conçues pour les barres de navigation.
La classe navbar-dark met le texte en clair et s’adapte donc parfaitement bien aux barres de navigation de couleurs foncée.
La classe navbar-light met le texte en foncé et s’adapte donc parfaitement bien aux barres de navigation de couleurs claire.
Comment changer la taille des liens ou du texte dans la barre de navigation ?
On a vu dans la leçon sur la typographie dans Bootstrap 5 qu’il existe différentes classes pour gérer la taille des textes.
- Donner la taille d’un titre avec les classes .h1,.h2,.h3…
- Utiliser les classes .display
- Utiliser la classe .small
- Utilisez les classes .fs*
C’est classe sont aussi utilisables sur les liens ou texte de la barre de navigation.
Exemple :
(j’ai rajouté des bordures à droite)
Comment mettre en évidence le lien actif ou désactiver un lien dans la barre de navigation ?
Pour mettre en évidence un lien actif, c’est-à-dire pour montrer aux lecteurs sur quelle page ils se trouvent, nous allons rajouter la classe active (actif).
Exemple si on se trouve sur la page contact.
Pour désactiver un lien, le principe est le même, mais nous allons cette fois appliquer la classe disabled.
Le lien s’éclaircit et n’est plus cliquable.
habituellement je laisse pas de commentaire sur les sites, mais là vous venez de me dépanner donc merci beaucoup !