Bootstrap Dropdown Plugin

Pranay Chauhan
Last Updated: May 13, 2022

Introduction

Have you ever tried to work with Bootstrap on your web pages?

Bootstrap is one of the most popular CSS frameworks for developing responsive websites.

Bootstrap provides us with easy ways to style websites, and it is significantly less verbose. 

In this article, we will discuss the dropdown plugin available in Bootstrap’s .dropdown class. We will learn about the usage of dropdown plugins.

We will also learn about the usage, methods and events when working with Bootstrap and also see about its implementation.

Bootstrap Dropdown

Dropdowns are toggleable, contextual overlays 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 is an intentional design decision.

Dropdowns are built on a third-party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

If you’re building our JavaScript from the source, it requires util.js.

Bootstrap Dropdown Plugin

Using the Dropdown plugin you can add dropdown menus to any components like navbars, tabs, pills and buttons.

If you want to include this plugin functionality individually, then you will need dropdown.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.

Usage

Firstly, we will see how to implement dropdowns in Bootstrap.

<div class="dropdown">
 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropdown button
 </button>
 <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
   <a class="dropdown-item" href="#">Action</a>
   <a class="dropdown-item" href="#">Another action</a>
   <a class="dropdown-item" href="#">Something else here</a>
 </div>
</div>

 

Output

 

You can toggle the dropdown plugin's hidden content −

  • Via data attributes − Add data-toggle = "dropdown" to a link or button to toggle a dropdown as shown below −
     
<div class = "dropdown">
 <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
    ...
 </ul>
</div>

 

  • If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use the data-target attribute instead of href = "#"−

 

<div class = "dropdown">
 <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
    Dropdown
    <span class = "caret"></span>
 </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
    ...
 </ul>
</div>

 

  • Via JavaScript − To call the dropdown toggle via JavaScript, use the following method −

 

$('.dropdown-toggle').dropdown()

Example

Within Navbar

The following example demonstrates the usage of a dropdown menu within a navbar −

<nav class = "navbar navbar-default" role = "navigation">

 <div class = "navbar-header">
    <a class = "navbar-brand" href = "#">CodingNinjas</a>
 </div>
  <div>
    <ul class = "nav navbar-nav">
       <li class = "active"><a href = "#">iOS</a></li>
       <li><a href = "#">SVN</a></li>
      
       <li class = "dropdown">
          <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
             Java
             <b class="caret"></b>
          </a>
         
          <ul class = "dropdown-menu">
             <li><a href = "#">jmeter</a></li>
             <li><a href = "#">EJB</a></li>
             <li><a href = "#">Jasper Report</a></li>
            
             <li class = "divider"></li>
             <li><a href = "#">Separated link</a></li>
            
             <li class = "divider"></li>
             <li><a href = "#">One more separated link</a></li>
          </ul>
         
       </li>
    </ul>
 </div>
 </nav>
 

 

Output

Within Tabs

The following example demonstrates the usage of dropdown menu within tabs −

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
  <li class = "active"><a href = "#">Home</a></li>
  <li><a href = "#">SVN</a></li>
  <li><a href = "#">iOS</a></li>
  <li><a href = "#">VB.Net</a></li>
 
  <li class = "dropdown">
     <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
        Java
        <span class = "caret"></span>
     </a>
    
     <ul class = "dropdown-menu">
        <li><a href = "#">Swing</a></li>
        <li><a href = "#">jMeter</a></li>
        <li><a href = "#">EJB</a></li>
       
        <li class = "divider"></li>
        <li><a href = "#">Separated link</a></li>
     </ul>
    
  </li>
  
  <li><a href = "#">PHP</a></li>
</ul>

 

Output

Methods

The dropdown toggle has a simple method to show or hide the dropdown.

$().dropdown('toggle')

 

Example

The following example demonstrates the usage of dropdown plugin method.

<nav class = "navbar navbar-default" role = "navigation">
 <div class = "navbar-header">
    <a class = "navbar-brand" href = "#">CodingNinjas</a>
 </div>

 <div id = "myexample">
    <ul class = "nav navbar-nav">
       <li class = "active"><a href = "#">iOS</a></li>
       <li><a href = "#">SVN</a></li>
   
       <li class = "dropdown">
          <a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>
         
          <ul class = "dropdown-menu">
             <li><a id = "action-1" href = "#">jmeter</a></li>
             <li><a href = "#">EJB</a></li>
             <li><a href = "#">Jasper Report</a></li>
            
             <li class = "divider"></li>
             <li><a href = "#">Separated link</a></li>
            
             <li class = "divider"></li>
             <li><a href = "#">One more separated link</a></li>
          </ul>
         
       </li>
   
    </ul>
 </div>
 </nav>

<script>
 $(function(){
    $(".dropdown-toggle").dropdown('toggle');
 });
</script>

 

Output

Frequently Asked Questions (FAQs)

  1. What are bootstrap dropdowns?
    Dropdowns are toggleable, contextual overlays for displaying lists of links, and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin.
     
  2. What is the use of bootstrap dropdown plugins?
    Using the Dropdown plugin you can add dropdown menus to any components like navbars, tabs, pills, and buttons.

Key Takeaways

We have learned about the dropdown in Bootstrap. We also learned about the dropdown plugins in Bootstrap. We also learned about the different methods and events of the dropdown plugin in Bootstrap. This article also explained the implementation of the usage of the dropdown plugin available in Bootstrap.

For more information about the react framework for frontend development, get into the entire Frontend web development course.

Happy Learning!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think