Bootstrap Dropdown Menu

Introduction

 
Dropdowns are toggleable and overlay for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering. This article demonstrates how to create a bootstrap dropdown menu.
 

Bootstrap

 
Bootstrap is a free front-end framework that includes HTML and CSS based design templates. Bootstrap gives you responsive designs.
 
Get Bootstrap from getbootstrap.com or CDN.
 
Below are the CDN paths:
  • https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
  • https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js
  • or 
  • https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js 
Dropdown Menu 
 
Dropdown can be triggered using a button tag or anchor tag. 
  1. <div class="dropdown">   
  2.   <button class="dropdown-toggle" type="button" id="menuButton" data-toggle="dropdown">    
  3.     Menu Button    
  4.   </button>    
  5.   <div class="dropdown-menu">    
  6.     <a href="#">Menu1</a>    
  7.     <a href="#">Menu2</a>    
  8.     <a href="#">Menu3</a>    
  9.     <a href="#">Menu4</a>    
  10.   </div>    
  11. </div>    
#menuButton class dropdown-toggle is used to enable to down arrow in the button.
 
#menuButton data attribute data-toggle is used to toggle the div or unordered list  or whatever we used will open and close.
 
The dropdown-menu class is a key one that used to change the content in the pop-up.
 
Types of Variations 
  1. Drop up
  2. Drop Right
  3. Drop Left 
The default variation is Drop down. We can set these variations based on our requirements. 
  1. <div class="dropup"//replace here to set the variations    
  2.   <button class="dropdown-toggle" type="button" id="menuButton" data-toggle="dropdown">    
  3.     Menu Button    
  4.   </button>    
  5.   <div class="dropdown-menu">    
  6.     <a href="#">Menu1</a>    
  7.     <a href="#">Menu2</a>    
  8.     <a href="#">Menu3</a>    
  9.     <a href="#">Menu4</a>    
  10.   </div>    
  11. </div>    
Note
Dropup/dropright/dropleft will work based on the browser space respectively. For example, we set the variation to dropup, but the user scrolled at some point and there is no enough space to load the whole toggle content, at that time it will take drop-down for that. similarly for drop up and drop right.
 
Set Active/Use Disable
 
Similarly we can set active for the menu items, which will add background color and looks like it is currently selected. 
  1. <div class="dropdown-menu">    
  2.   <a href="#">Menu1</a>    
  3.   <a class="active" href="#">Menu2</a>    
  4.   <a href="#">Menu3</a>    
  5. </div>    
To disable we can use disabled class in the menu item.
  1. <div class="dropdown-menu">    
  2.   <a href="#">Menu1</a>    
  3.   <a class="disabled" href="#">Menu2</a>    
  4.   <a href="#">Menu3</a>    
  5. </div>    
Toggle/Update/Destroy element using Javascript 
 
Please make sure  data-toggle="dropdown" is present in the HTML. Because it is mandatory to have this so that we can toggle it in Javascript.
 
$('.dropdown-toggle').dropdown()
 
$('#dropmenu').dropdown('update')- Updates the position of an element’s dropdown
 
$('#dropmenu').dropdown('dispose')
 

Events

 
show.bs.dropdown- this event fires when dropdown opened
 
hide.bs.dropdown- this event fires when dropdown closed 
  1. $('#myDropDownId').on('show.bs.dropdown'function () {  
  2.     
  3. })  
So far we have seen how to create a bootstrap drop-down menu and its configuration.
 
Here we will see how to create a drop-down menu with checkboxes:
 
Add HTML
  1. <style>    
  2.     #dropmenu {    
  3.         top: 67px;    
  4.         left: 220px;    
  5.     }    
  6. </style>    
  7.     
  8. <div>       
  9.     <button data-toggle="dropdown" data-open-dropdown="dropmenu"> Menu </button>    
  10.     <ul id="dropmenu" class="dropdown-menu">    
  11.         <li>    
  12.             <a href="#" data-value="menu1" tabIndex="-1">    
  13.                 <input id="menu1" type="checkbox" /> Menu1    
  14.             </a>    
  15.         </li>    
  16.         <li>    
  17.             <a href="#" data-value="menu2" tabIndex="-1">    
  18.                 <input id="menu2" type="checkbox" /> Menu3    
  19.             </a>    
  20.         </li>    
  21.         <li>    
  22.             <a href="#" data-value="menu3" tabIndex="-1">    
  23.                 <input id="menu3" type="checkbox" /> Menu3    
  24.             </a>    
  25.         </li>    
  26.         <li>    
  27.             <a href="#" data-value="menu4" tabIndex="-1">    
  28.                 <input id="menu4" type="checkbox" /> Menu4    
  29.             </a>    
  30.         </li>    
  31.         <li>    
  32.             <a href="#" data-value="menu5" tabIndex="-1">    
  33.                 <input id="menu5" type="checkbox" /> Menu5    
  34.             </a>    
  35.         </li>    
  36.     </ul>    
  37. </div>    
How it works 
 
Your toggle content can be in an unordered list. Use a button or link to toggle your content using data-toggle="dropdown".
 
Use class "dropdown-menu" to your unordered list which makes your list inside the toggle box.
 
Add JQuery
  1. <script>  
  2.     var checkBoxOptions = []  
  3.     $('.dropdown-menu a').on('click'function (event) {  
  4.         var $target = $(event.currentTarget),  
  5.             val = $target.attr('data-value'),  
  6.             $inp = $target.find('input'),  
  7.             idx;  
  8.         if ((idx = checkBoxOptions.indexOf(val)) > -1) {  
  9.             checkBoxOptions.splice(idx, 1);  
  10.             setTimeout(function () {  
  11.                 $inp.prop('checked'false)  
  12.             }, 0);  
  13.         } else {  
  14.             checkBoxOptions.push(val);  
  15.             setTimeout(function () {  
  16.                 $inp.prop('checked'true)  
  17.             }, 0);  
  18.         }  
  19.         $(event.target).blur();  
  20.         return false  
  21.     })  
  22. </script>  
How it Works 
 
The above jQuery code will retain your checked items when you toggle back. 
 
The checkBoxOptions array variable will store the data-value attribute of the checked items. so that whenever the changes happened to the checkboxOptions array the checked property will be handled. If the array doesn't have the data-value then it will push to the array else it will splice/remove the value and uncheck the checkbox. 
 
Output 
 
 
 

Summary

 
Here we have seen how to create a drop down menu with checkboxes using Bootstrap.