Bootstrap Dropdown

Q: How can we remove animations from bootstrap dropdowns?

With the dropdown button, add the data-mdb-dropdown-animation="off" attribute to remove animation on click.

Q: How to make the dropdown menu in the dark theme?

By adding .dropdown-menu-dark onto the existing .dropdown-menu, we can add a dark variant and match the dark navbar.

Q: How can we toggle a dropdown in Bootstrap?

We can write data-toggle="dropdown" in Bootstrap to move up and down in a dropdown. We can add it to a button with or a link with .

Introduction

Hello Ninjas! You must have heard about Bootstrap. Bootstrap is a free front-end framework with various predefined CSS(Cascading Style Sheets) codes.

It takes less effort than others to make unique and fantastic web pages. Today we will take a step into one more exciting topic for a better understanding of workflow and concepts.

In this blog, we will be discussing Bootstrap dropdowns in detail.

Bootstrap dropdown menus are considered togglable(when clicked, not hovered), displaying links in a list format from which users can choose an item. For developing a Bootstrap dropdown, we use the class “.dropdown”.

Alternatively, dropdowns can be made interactive with the Bootstrap Javascript plugin. Here we use Popper.js to create dropdowns that provide dynamic positioning and viewport detection; we include bootstrap.bundle.min.js / bootstrap.bundle.js before the JS file.

We can also have form controls like login forms and search engines inside dropdown menus.

Let us get started with basic examples while covering all related to the topic.

Basic Example with Explanation

<!DOCTYPE html>
<html>
   <head>
       <meta chrset="UTF 8" />
           <title>Coding Ninjas: Bootstrap Dropdowns</title>
           <meta name="viewport", content="width=device-width", initial-scale=1.0>
           <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
           <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
           <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
  
   <body>
       <h2>Bootstrap Dropdowns Example</h2>
       <div class="dropdown">
           <button class="btn dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>
                     
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><a class="dropdown-item" href="#">Mobile Phone</a></li>
               <li><a class="dropdown-item" href="#">Tablet</a></li>
               <li><a class="dropdown-item" href="#">Laptop</a></li>
           </ul>
       </div>
   </body>
</html>

Here .dropdown class has wrapped the dropdown toggles and menus. We have used .dropdown-toggle to open and close the dropdown menu, .dropdown-menu and .dropdown-item for containing dropdown items.

Furthermore, for building it, we use <ul> and <li> elements which can be triggered from <a> and <button> tags.

Output

Types of Dropdown Buttons

Let us look at a few types of dropdown buttons, i.e., ‘regular’, ‘split’, ‘link’ and ‘plain text’ buttons.

Regular Button

With simple markup, any single .btn can be transformed into a dropdown toggle. It is also known as a single button.

Code

<body>
       <h2>Bootstrap Dropdowns Example</h2>
       <div class="gadgetDropdown">
           <button class="btn btn-primary dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>
                     
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><a class="dropdown-item" href="#">Mobile Phone</a></li>
               <li><a class="dropdown-item" href="#">Tablet</a></li>
               <li><a class="dropdown-item" href="#">Laptop</a></li>
               <li><a class="dropdown-item" href="#">Other Gadgets</a></li>
           </ul>
       </div>
</body>

Output

Split Button

Using the .dropdown-toggle-split class, we can split dropdown text and ‘caret’ with proper spacing, and it is used to reduce horizontal padding by 25% around the caret arrow icon and keep the caret centered.

Code

<body>
       <h2>Bootstrap Dropdowns Example</h2>
       <div class="gadgetDropdown">
           <button class="btn btn-primary"
           type="button"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>

           <button type = "button"
           id="dropdownMenuButton"
           class = "btn btn-primary dropdown-toggle dropdown-toggle-split"
           data-bs-toggle = "dropdown"
           aria-haspopup = "true"
           aria-expanded = "false">
              <span class = "sr-only"></span>
           </button>
                     
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><a class="dropdown-item" href="#">Mobile Phone</a></li>
               <li><a class="dropdown-item" href="#">Tablet</a></li>
               <li><a class="dropdown-item" href="#">Laptop</a></li>
               <li><a class="dropdown-item" href="#">Other Gadgets</a></li>
           </ul>
       </div>
</body>

Output

Link Button

These buttons are the same as regular buttons except that they use <a class="dropdown-item-text">.

Note: We can use <a> tag instead of <button> tag for caret if we are using Popper.js.

Code

<body>
       <h2>Bootstrap Dropdowns Example</h2>
       <div class="gadgetDropdown">
           <button class="btn btn-primary dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>
                    
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><a class="dropdown-item-text" href="#">Mobile Phone</a></li>
               <li><a class="dropdown-item-text" href="#">Tablet</a></li>
               <li><a class="dropdown-item-text" href="#">Laptop</a></li>
               <li><a class="dropdown-item-text" href="#">Other Gadgets</a></li>
           </ul>
       </div>
</body>

Output

Plain Text Button

These buttons are the same as regular buttons except that they use <span class="dropdown-item-text">.

Code

<body>
       <h2>Bootstrap Dropdowns Example</h2>
       <div class="gadgetDropdown">
           <button class="btn btn-primary dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>
                    
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><span class="dropdown-item-text" href="#">Mobile Phone</span></li>
               <li><span class="dropdown-item-text" href="#">Tablet</span></li>
               <li><span class="dropdown-item-text" href="#">Laptop</span></li>
               <li><span class="dropdown-item-text" href="#">Other Gadgets</span></li>
           </ul>
       </div>
</body>

Output

Note: These dropdown items are not clickable. These are implemented when we need only texts, not links.

Dropdown Sizes

Different sizes are possible for Bootstrap dropdown buttons. This includes large-sized, medium-sized and small-sized buttons.

Code

<body>
       <h2>Bootstrap Dropdowns Example</h2>
       <!-- Large button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-warning btn-lg dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Large Gadgets Dropdown Button
           </button>
                    
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><span class="dropdown-item" href="#">Mobile Phone</span></li>
               <li><span class="dropdown-item" href="#">Tablet</span></li>
               <li><span class="dropdown-item" href="#">Laptop</span></li>
               <li><span class="dropdown-item" href="#">Other Gadgets</span></li>
           </ul>
       </div>
      
       <!-- Medium button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-warning btn-md dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Medium Gadgets Dropdown Button
           </button>
                    
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><span class="dropdown-item" href="#">Mobile Phone</span></li>
               <li><span class="dropdown-item" href="#">Tablet</span></li>
               <li><span class="dropdown-item" href="#">Laptop</span></li>
               <li><span class="dropdown-item" href="#">Other Gadgets</span></li>
           </ul>
       </div>

       <!-- Small button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-warning btn-sm dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Small Gadgets Dropdown Button
           </button>
                    
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><span class="dropdown-item" href="#">Mobile Phone</span></li>
               <li><span class="dropdown-item" href="#">Tablet</span></li>
               <li><span class="dropdown-item" href="#">Laptop</span></li>
               <li><span class="dropdown-item" href="#">Other Gadgets</span></li>
           </ul>
       </div>
</body>

Output

Dropdown Colors

Button variants are available for the Bootstrap dropdown. For example, we use .btn-primary, .btn-secondary, .btn-success, and .btn-danger for blue, grey, green and red color buttons and more.

Code

<body>
       <h2>Bootstrap Dropdowns Example</h2>
       <!-- Primary button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-primary dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Primary Gadgets
           </button>
           <!--You can use the <ul> and <li> for all the displayed buttons below-->         
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><span class="dropdown-item-text" href="#">Mobile Phone</span></li>
               <li><span class="dropdown-item-text" href="#">Tablet</span></li>
               <li><span class="dropdown-item-text" href="#">Laptop</span></li>
               <li><span class="dropdown-item-text" href="#">Other Gadgets</span></li>
           </ul>
       </div>
      
       <!-- Secondary button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-secondary dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Secondary Gadgets
           </button>
       </div>

       <!-- Warning button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-warning dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Warning Gadgets
           </button>
       </div>

       <!-- Danger button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-danger dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Danger Gadgets
           </button>
       </div>

       <!-- Info button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-info dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Info Gadgets
           </button>
       </div>

       <!-- Success button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-success dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Success Gadgets
           </button>
       </div>

       <!-- Light button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-light dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Light Gadgets
           </button>
       </div>

       <!-- Dark button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-dark dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Dark Gadgets
           </button>
       </div>

       <!-- Link button displayed here-->
       <div class="gadgetDropdown" style="padding:10px">
           <button class="btn btn-link dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Link Gadgets
           </button>
       </div>
   </body>

Output

State of Dropdown Items

Let us look at the two states of dropdown items: Active and Disabled.

Active: The .active class is used for dropdown items to style them as active.
Disabled: The .disabled class is used to style Bootstrap dropdown items as disabled, which means the user can not select that particular item from the list.

Code

<body>
       <h2>Bootstrap Dropdowns Example</h2>
       <!-- Active and disabled states displayed here-->
       <div class="gadgetDropdown">
           <button class="btn btn-success dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>
                   
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><a class="dropdown-item active" href="#">Mobile Phone</a></li>
               <li><a class="dropdown-item" href="#">Tablet</a></li>
               <li><a class="dropdown-item" href="#">Laptop</a></li>
               <li><a class="dropdown-item disabled" href="#">Other Gadgets</a></li>
           </ul>
       </div>
</body>

Output

Here, we have kept the first list element as ‘active’ and the last element in the list as ‘disabled’.

Menu Alignment in Bootstrap

A dropdown menu is positioned from the left automatically by default. If we need to align it towards the right side, we use class .dropdown-menu-end to the .dropdown-menu.

Now let's look at an example of its working.

Code

<body>
       <h2>Bootstrap Dropdowns Example</h2>
       <div class="gadgetDropdown">
           <button class="btn btn-dark dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>
                   
           <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
               <li><a class="dropdown-item" href="#">Mobile Phone</a></li>
               <li><a class="dropdown-item" href="#">Tablet</a></li>
               <li><a class="dropdown-item" href="#">Laptop</a></li>
               <li><a class="dropdown-item" href="#">Other Gadgets</a></li>
           </ul>
       </div>
</body>

Output

We can also use class .dropdown-menu-start to align it towards the left side.

Dropdown Directions

Let us look at the different types of dropdown directions we can use while designing our websites.

Dropup
Change the class of the <div> parent element for the dropdown menu to expand upwards from .dropdown to .dropup.
Dropright
Change the class of the <div> parent element if you want the bootstrap dropdown menu to expand towards the right from .dropdown to .dropend or .dropright.
Dropleft
Change the class of the <div> parent element for the dropdown menu to expand towards the left from .dropdown to .dropstart or .dropleft.

Code

<body>
       <h2 style="margin: 10px;">Bootstrap Dropdowns Example</h2>
       <!-- Margin having 4 parameters for top, right, buttom, left -->
       <div class="gadgetDropdown dropstart" style="margin: 0px 0px 10px 200px;">
           <button class="btn btn-dark dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>
                   
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><a class="dropdown-item" href="#">Mobile Phone</a></li>
               <li><a class="dropdown-item" href="#">Tablet</a></li>
               <li><a class="dropdown-item" href="#">Laptop</a></li>
               <li><a class="dropdown-item" href="#">Other Gadgets</a></li>
           </ul>
       </div>

       <div class="gadgetDropdown dropup" style="margin: 150px 0px 10px 200px;">
           <button class="btn btn-warning dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>
                   
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><a class="dropdown-item" href="#">Mobile Phone</a></li>
               <li><a class="dropdown-item" href="#">Tablet</a></li>
               <li><a class="dropdown-item" href="#">Laptop</a></li>
               <li><a class="dropdown-item" href="#">Other Gadgets</a></li>
           </ul>
       </div>

       <div class="gadgetDropdown dropend" style="margin: 0px 0px 20px 200px;">
           <button class="btn btn-danger dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>
                   
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><a class="dropdown-item" href="#">Mobile Phone</a></li>
               <li><a class="dropdown-item" href="#">Tablet</a></li>
               <li><a class="dropdown-item" href="#">Laptop</a></li>
               <li><a class="dropdown-item" href="#">Other Gadgets</a></li>
           </ul>
       </div>
</body>

Output

Output showing dropdown at the start(on the left side).

Output showing dropdown on top.

Output showing dropdown list at last(on right-side).

Menu Content

Let us now discuss adding a header, keeping a divider and adding forms in the Bootstrap dropdown.

Adding Header

We can label sections of actions in any dropdown menu by adding the class .dropdown-header.

<body>
       <h2 style="margin: 10px;">Bootstrap Dropdowns Example</h2>
       <div class="gadgetDropdown" style="margin: 10px;">
           <button class="btn btn-danger dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>
                   
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><h4 class="dropdown-header" href="#">Gadget: Header</h4></li>
               <li><a class="dropdown-item" href="#">Mobile Phone</a></li>
               <li><a class="dropdown-item" href="#">Tablet</a></li>
               <li><a class="dropdown-item" href="#">Laptop</a></li>
               <li><a class="dropdown-item" href="#">Other Gadgets</a></li>
           </ul>
       </div>
</body>

Output

Adding Divider

Related menu items can be separated using dividers in bootstrap dropdowns.

<body>
       <h2 style="margin: 10px;">Bootstrap Dropdowns Example</h2>
       <div class="gadgetDropdown" style="margin: 10px;">
           <button class="btn btn-warning dropdown-toggle"
           type="button"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
               Gadgets Dropdown Button
           </button>
                   
           <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <li><a class="dropdown-item" href="#">Mobile Phone</a></li>
               <li><a class="dropdown-item" href="#">Tablet</a></li>
               <li><a class="dropdown-item" href="#">Laptop</a></li>
               <ul class="dropdown-divider"></ul>
               <li><a class="dropdown-item" href="#">Other Gadgets</a></li>
           </ul>
       </div>
</body>

Output

Adding Forms

Furthermore, there is a facility to add forms within the dropdown menu and give required negative space, and we use margin or padding utilities.

<body>
       <h2 style="margin: 10px;">Bootstrap Dropdowns Example</h2>
       <div class="fillDropdown" style="margin: 10px;">
           <button type="button"
           class="btn btn-dark dropdown-toggle"
           id="dropdownMenuButton"
           data-bs-toggle="dropdown">
               Fill the Dropdown Form!
               <span class="caret"></span>
           </button>
           <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
               <form class="px-5 py-3">
                   <div class="form-group">
                       <label for="exampleDropdownFormEmail1">Email Address</label>
                       <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@codingninjas.com">
                   </div>
                   <div class="form-group">
                       <label for="exampleDropdownFormPassword1">Password</label>
                       <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Enter the Password">
                   </div>
                   <div class="form-check">
                       <input type="checkbox" class="form-check-input" id="dropdownCheck">
                       <label class="form-check-label" for="dropdownCheck"> Remember Me </label>
                   </div>
                   <button type="submit" class="btn btn-primary">Sign In</button>
               </form>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#">New around here? Sign Up</a>
               <a class="dropdown-item" href="#">Forgot Password?</a>
           </div>
       </div>       
</body>

Output

This was all about dropdowns in Bootstrap. Let us see some of the frequently asked questions on this topic.

Frequently Asked Questions

How can we remove animations from bootstrap dropdowns?

With the dropdown button, add the data-mdb-dropdown-animation="off" attribute to remove animation on click.

How to make the dropdown menu in the dark theme?

By adding .dropdown-menu-dark onto the existing .dropdown-menu, we can add a dark variant and match the dark navbar.

What are various sizes available for buttons in the Bootstrap dropdown?

Various sizes we can give while designing our website are: Small(-sm), Medium(-md), Large(-lg), XL(-xl), and XXL(-xxl).

How can we toggle a dropdown in Bootstrap?

We can write data-toggle="dropdown" in Bootstrap to move up and down in a dropdown. We can add it to a button with <button> or a link with <a>.

What is the use of working with Bootstrap dropdowns?

Bootstrap dropdowns are useful when picking a single item from a list of items.

Conclusion

In this article, we covered Bootstrap dropdowns. We looked into the types of dropdown buttons, i.e., regular, split, link and plain text. We also covered dropdown sizes, colors, state of dropdown items, menu alignment in Bootstrap, dropdown directions and other menu contents like adding header, divider and forms.

If you would like to learn more similar to this topic, check out our related articles on-

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, JavaScript, System Design, DBMS, Java, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Happy Coding, Ninja!🥷✨