Créer des menus de navigation avec Bootstrap 4

Un menu de navigation est une liste de liens permettant de parcourir les pages et les ressources (fichier, image, email, etc.) de votre site. Il est édité avec la classe nav.

La navigation de base est construite avec flexbox.

Menu simple

Voici un exemple de menu avec 4 liens.


  
    Accueil
  
  
    A propos
  
  
    Services
  
  
    Contact

Afficher:

Vous remarquez que, par défaut, Bootstrap n’inclut pas le lien actif. C’est à vous de le faire avec une instruction CSS.

Dans l’exemple ci-dessous, le lien actif est affiché en orange:

.active{
    color: orange;
}

Afficher:

Menu simplifié

Il est possible d’alléger le code en supprimant la balise

nav


  Accueil
  A propos
  Services
  Contact

Sémantiquement la balise

suffit pour annoncer une zone de navigation.

Style personnalisé

Vous pouvez utiliser les classes de style décrites dans le chapitre « Gestion des alignements » pour:

centrer les liens avec justifier-centre-de-contenu
aligner à droite les liens avec justify-content-end

 
  Accueil
  A propos
  Services
  Contact


 
  Accueil
  A propos
  Services
  Contact

Afficher:

Vous pouvez même travailler verticalement avec flex-column.


  Accueil
  A propos
  Services
  Contact

Afficher:

Menu de l’onglet

Voici une variante de menu basée sur des onglets et utilisant la classe onglets de navigation . Ce type de menu est souvent utilisé avec un composant javascript (voir le chapitre «composants»).


  Accueil
  A propos
  Services
  Contact

Afficher:

Menu des boutons

Les liens peuvent être présentés sous forme de bouton avec nav-pilules .


  Accueil
  A propos
  Services
  Contact

Afficher:

Grand bouton

Il est possible de répartir la taille des boutons sur la largeur du conteneur avec nav-fill . Les liens apparaîtront plus grands. Cependant, vous devez inclure élément de navigation dans chaque lien.


  Accueil
  A propos
  Services
  Contact

Afficher:

Grand bouton justifié

Avec nav-fill vu précédemment, la taille des boutons dépend du contenu.

Si vous mettez justifié par la navigation au lieu de cela, tous les boutons, qui divisent la largeur du conteneur, auront la même taille.


  A.
  A propos
  Services
  Contact


 
  A.
  A propos
  Services
  Contact

Afficher:

Mode réactif

Vous pouvez utiliser des points d’arrêt (sm, md, lg, xl) pour adapter le menu à la taille de l’appareil.

Le code ci-dessous propose deux présentations du même menu. Pour une taille d’écran inférieure à 576px, les boutons sont empilés ( colonne flexible ). Mais au-delà de cette taille, les liens s’alignent flex-sm-row .


  Accueil
  A propos
  Services
  Contact

Affichage sur un écran inférieur à 576px (-sm), causé par colonne flexible .

Affichage à partir d’une taille d’écran de 576 pixels, provoqué par flex-sm-row .

Menu déroulant

Les listes déroulantes sont construites avec la bibliothèque tierce Popper.js que vous avez normalement chargée avec Jquery et Bootstrap

Le lien déroulant

Un lien déroulant affiche une liste de liens lorsque vous cliquez dessus. Cette liste disparaît si vous cliquez n’importe où sur la page ou si vous cliquez à nouveau sur le bouton.


  Services 
  
    Service 1
    Autre service
    Dernier Service

Affichage du bouton non cliqué:

Affichez en cliquant:

Le bouton déroulant

Ceci est une variante du lien déroulant avec la balise

Afficher:

Le bouton déroulant partagé

Nous combinons le bouton texte (inactif) et le bouton curseur (sur lequel nous cliquons pour développer) pour former un seul bouton groupe btn.

 
  
  
  
    Service 1
    Autre service
    Dernier service

Afficher:

Vous remarquez que le curseur est plus espacé et mieux aligné avec le texte du bouton.

Le bouton ne se développe pas si vous cliquez sur le texte.

En-tête de menu

Vous pouvez ajouter des en-têtes pour créer des sections de sous-menu avec en-tête déroulante .


  
  
  
    Accompagnement
 
    Service 1
    Autre service
    Dernier service

Afficher:

Séparateur de menu

Les groupes de sous-menus peuvent être séparés par un bloc de séparation liste déroulante.


  
  
  
    Accompagnement
    Service 1
    Autre service
    Dernier service
    
 
    Lien séparé

Afficher:

Liste non liée

Avec Bootstrap version 4, vous pouvez remplacer tous les liens par boutons

Barre de navigation réactive

Une barre de navigation, souvent située en haut de page, comprend des liens mais aussi le logo (ou la marque). Il peut contenir du texte, des icônes et des éléments de formulaire.

Sur les petits écrans, les liens de navigation sont masqués et remplacés par un bouton qui les déroule lorsqu’on clique dessus.