Bootstrap 5 : Apprendre à créer un menu déroulant

Nous avons vu dans la leçon précédente comment créer une barre de navigation basique avec Bootstrap 5. Regardons maintenant comment créer une barre de navigation plus sophistiquée en y intégrant un menu déroulant.

L’illustration de cette leçon va se faire en créant une toute nouvelle barre de navigation.

Elle sera composée :

D’un lien accueil différent des autres liens.
D’un menu déroulant
D’un bouton
D’un menu rétractable

Les classes que nous allons voir ou revoir dans cette leçon :

navbar-expand-*
navbar-light bg-light
navbar-nav
nav-item
navbar-brand
dropdown

dropdown-toggle
data-bs-toggle= »dropdown
dropdown-menu
dropdown-item
data-bs-toggle= »dropdown« (attribut)

Création d’une barre de navigation de basique (rappel)

Nous allons pour commencer, recréer la barre de navigation que nous avons réalisé dans la leçon sur les barres de navigation basique.

Pour rappel :

On crée une balise <nav> à laquelle on rajoute :

Un point de transition de 768px (md) à partir duquel les éléments viendront se positionner les uns en dessous des autres avec les classes :
- - navbar-expand-md
Un texte clair avec une couleur de fond sombre avec la classe :
- - navbar-light bg-light

Ce qui donne : <nav class= »navbar navbar-expand-md navbar-light bg-light »>

Un conteneur fluide pour bien espacer les éléments.
- - <div class= »container-fluid »>
Enfin, nous créons une liste avec un lien accueil au design diffèrent des autres liens.
- <ul class= »navbar-nav« >
  <!–Lien spécial–>
  <li class= »nav-item mt-1″>
  <a class= »navbar-brand » href= »# »>Accueil</a>
  </li>
  ….

Le code entier pour cette première partie.

Voyons maintenant comment créer un lien avec un menu déroulant.

Création d’un menu déroulant avec Bootstrap 5

La création d’un menu déroulant en HTML/CSS/JavaScript peut parfois s’avérer fastidieux. C’est pourquoi Bootstrap 5 a conçu différentes classes pour nous permettre de les réaliser très facilement et sans avoir à connaître le JavaScript.

Les classes et attributs nécessaires à la création d’un menu déroulant avec Bootstrap 5 :

dropdown , qui dans notre maquette s’intègre à la balise <li> .
dropdown-toggle qui s’intègre dans la balise <a> du lien que l’on veut déroulant <a>.
data-bs-toggle= »dropdown« qui s’intègre lui aussi a la balise <a> du lien que l’on veut déroulant.
dropdown-menu qui s’intégrer à une balise <ul> imbriquer dans une balise.
dropdown-item qui s’intègre aux liens qui apparaissent lorsqu’on déroule le menu.

Création du menu déroulant étape par étape :

1 : A la suite du lien « contact »…
<li class= »nav-item« >
<a class= »nav-link » href= »# »>Contact</a>
</li>

..je crée un nouveau lien « produit » et je stipule à Bootstrap que je veux que ce lien possède un menu déroulant avec la classe dropdown.
• <li class= »nav-item dropdown« >

2 : On place ensuite le lien qui ouvre un menu déroulant avec la classes dropdown-toggle et l’attribut data-bs-toggle= »dropdown« .

• <a class= »nav-link dropdown-toggle » href= »# » data-bs-toggle= »dropdown« >Produit</a>

3 : On imbrique une nouvelle liste <ul> dans la balise qui <li> (celle qui contient la classe dropdown) et on lui donne la classe dropdown-menu.
• <ul class= »dropdown-menu« >

4 : dans la balise <li> nouvellement créé on place les liens <a> qui vont apparaître lorsqu’on déroule le menu, auquel on ajoute la classe dropdown-item.
<li><a class= »dropdown-item » href= »# »>Ordinateurs</a></li>
<li><a class= »dropdown-item » href= »# »>Tablettes</a></li>
<li><a class= »dropdown-item » href= »# »>Smartphone</a></li>