Réaliser un sous-menu (Dropdown) avec Bootstrap4

Comme l’indique son nom, le dropdown est un composant  qui rassemble les sous éléments d’un menu. Bootstrap4 vous permet de le créer facilement et vous propose différents styles pour sa personnalisation. Nous allons faire un petit rappel qui est primordial pour la réalisation d’un dropdown avec Bootstrap4, dropdown pour fonctionner correctement requiert le plugin popper.min.js si vous avez chargé bootstrap.js/bootstrap.min.js sur votre page. Mais vous pouvez éviter de faire appel à popper.min.js si vous charger sur votre page HTML bootstrap.bundle.js/ bootstrap.bundle.min.js à la place de bootstrap.js/bootstrap.min.js, car bootstrap.bundle.js intègre popper.js et bootstrap.js.

Conception du dropdown :

Voici décortiquée point par point la réalisation d’un dropdown

• Il faut au préalable définir un conteneur principal avec la classe .dropdown auquel vous incorporerez l’élément principal et ses sous-éléments
• L’élément principal peut être soit un bouton ou un lien, mais il faut qu’il possède la classe .dropdown-toggle et l’attribut data-toggle avec pour valeur dropdown, très important car il permet d’afficher les sous-éléments quand on clique sur l’élément principal
• Les sous-éléments doivent posséder chacun la classe .dropdown-item et tous rassemblés dans un conteneur possédant la classe .dropdown-menu

Exemple : Nous allons réaliser un sous menu pour le lien Accueil de la barre de navigation que nous avons créé dans le cours précédent

<div class="collapse navbar-collapse" id="menuhamburger">
   <ul class="navbar-nav m-auto">
   	<li class="dropdown nav-item active">
   	  	<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Accueil</a>
   	  	<div class="dropdown-menu">
            <a class="dropdown-item" href="#">Sous-Menu 1</a>
            <a class="dropdown-item" href="#">Sous-Menu 2</a>
           <a class="dropdown-item" href="#">Sous-Menu 3</a>
            <a class="dropdown-item" href="#">Sous-Menu 4</a>
     </div>
   	  </li>
   	  <li class="nav-item">
   	  	<a href="#" class="nav-link">A propos</a>
   	  </li>
   	  <li class="nav-item">
   	  	<a href="#" class="nav-link">Gallerie</a>
   	  </li>
   	  <li class="nav-item">
   	  	<a href="#" class="nav-link">Tutoriels</a>
   	  </li>
   	  <li class="nav-item">
   	  	<a href="#" class="nav-link">Blog</a>
   	  </li>
   	  <li class="nav-item">
   	  	<a href="#" class="nav-link">Contact</a>
   	  </li>
      </ul>
      <form class="form-inline">
  <input class="form-control mr-sm-2" type="search" placeholder="Search">
  <button class="btn btn-primary" type="submit">Envoyer</button>
     </form>
 </div>

Résultat :

Quelques outils pour la personnalisation du dropdown mise à notre disposition par Bootstrap4 :

Ils sont nombreux les outils de personnalisations du dropdown, nous pourrons citer en exemple l’utilisation d’un split Bouton pour afficher le sous-menu, l’activation et la désactivation d’un sous-élément ou encore placer un entête dans votre sous-menu. Mais nous étudierons ici commettre intégrer des séparateurs dans votre sous-menu,  et comment définir la position de notre sous-menu.

Séparer les sous-éléments d’un dropdown :

Pour séparer les sous-éléments inclus dans le dropdown , il faut placer une balise div avec la classe .dropdown-divider là ou vous désirez voir votre séparateur. Exemple :

<li class="dropdown nav-item active">
     <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Accueil</a>
      <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Sous-Menu 1</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Sous-Menu 2</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Sous-Menu 3</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Sous-Menu 4</a>
     </div>
</li>

Résultat :

Positionner votre dropdown :

Bootstrap4 met à votre disposition les classes .dropup pour positionner le dropdown en haut, .dropdown pour positionner le dropdown en bas, .dropright pour positionner le dropdown à droite et .dropleft  pour positionner votre sous menu à gauche. Exemple  1 : Nous allons réaliser un sous menu qui apparait en haut lorsqu’on clique sur le bouton

<div class="dropdown pt-5 dropup">
       <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Bouton dropdown</button>
       <div class="dropdown-menu">
               <a class="dropdown-item" href="#">Sous-Menu 1</a>
               <a class="dropdown-item" href="#">Sous-Menu 2</a>
       </div>
</div>

Résultat : Exemple  2 : Nous allons réaliser un sous menu qui apparait en bas lorsqu’on clique sur le bouton

<div class="dropdown pt-5 dropdown">
       <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Bouton dropdown</button>
       <div class="dropdown-menu">
               <a class="dropdown-item" href="#">Sous-Menu 1</a>
               <a class="dropdown-item" href="#">Sous-Menu 2</a>
       </div>
</div>

Résultat : 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.