Bootstrap 5 : Créer une barre de navigation basique

Bootstrap 5 Créer une barre de navigation avec des liens cliquables

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.

Table des matieres

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 
Bootstrap 5 Créer une barre de navigation avec des liens cliquables

En dessous de 576px

Bootstrap 5 Créer une barre de navigation avec des liens cliquables

Au-dessus de 576px

Bootstrap 5 Créer une barre de navigation avec des liens cliquables

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.

Bootstrap 5 Aligner les liens de la barre de navigation

justify-content-end : pour aligner les liens à droite.

Bootstrap 5 Aligner les liens de la barre de navigation

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.

Bootstrap 5 Mettre en évidence un logo, une marque, un lien spécial dans la barre de navigation
Bootstrap 5 Mettre en évidence un logo, une marque, un lien spécial dans la barre de navigation
Bootstrap 5 Mettre en évidence un logo, une marque, un lien spécial dans la barre de navigation

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.

bootstrap 5 Centrer verticalement un élément dans la barre de navigation

Sans marge interne haute

 

bootstrap 5 Centrer verticalement un élément dans la barre de navigation

Avec marge interne haute

 

bootstrap 5 Centrer verticalement un élément dans la barre de navigation

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 couleur de fond d’une barre de navigation créée avec Bootstrap 5 ?
Comment changer la couleur de fond d’une barre de navigation créée avec Bootstrap 5 ?
Comment changer la couleur de fond d’une barre de navigation créée avec Bootstrap 5 ?

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)

bootstrap 5 Comment changer la taille des liens ou du texte dans la barre de navigation ?

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.

bootstrap 5 Comment mettre en évidence le lien actif ou désactiver un lien dans la barre de navigation ?

Pour désactiver un lien, le principe est le même, mais nous allons cette fois appliquer la classe disabled.

Bootstrap 5 Comment désactiver un lien dans la barre de navigation ?

Le lien s’éclaircit et n’est plus cliquable.

Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0