How to use the Dropdown plugin ?
Last Updated :
08 Oct, 2021
In this article, we will learn about Bootstrap’s dropdown plugin. These are toggleable contextual overlays for attaching some lists of links, options, and more. The bootstrap Javascript plugin makes it responsive and interactive and these dropdowns are toggled by clicking rather than by hovering over it. It is necessary to include the third-party popper.js library that makes viewport detection and dynamic positioning possible. The CSS and Javascript plugins that are essential for dropdowns are given the steps below.
Approach:
- Wrap the child elements inside a .dropdown class.
- We can use either a button or an anchor tag for toggling. For toggling we need to use the .dropdown-toggle class and add data-bs-toggle=”dropdown” element to the parent class.
- For making the dropdown menu items use the .dropdown-menu class. Use .dropdown-item class with each item names.
Step 1: Include Bootstrap CSS in the HTML <head> section to load the stylesheet.
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”/>
Add the Bootstrap JavaScript plugin and dependency.
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script>
Step 2: We can directly copy the Bootstrap starter template as given in the official Bootstrap Documentation.
Step 3: In this step, we will use the bootstrap dropdown class, as explained below:
- Wrap the child elements inside a .dropdown class.
- We can use either a button or an anchor tag for toggling. For toggling, we need to use the .dropdown-toggle class and add data-bs-toggle=”dropdown” element to the parent class.
- For making the dropdown, menu items use the .dropdown-menu class. Use .dropdown-item class with each item names. We will utilize the above approach & will make the dropdown with different cases. Let’s discuss it one by one.
Dropdown menu through the button: We can make a dropdown from a button with any of the .btn classes with some changes in the markup like adding data-bs-toggle=”dropdown” and aria-expanded=”false” as given below. For toggling, we need to use the .dropdown-toggle.
Example 1: This example illustrates the use of a dropdown class in Bootstrap where the data-bs-toggle class is used whose value is set to the dropdown.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
</head>
<body>
<h2 class="text-success">GeeksforGeeks</h2>
<div class="dropdown">
<h5>Course List</h5>
<button class="btn btn-success dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"> Dropdown button
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Algo</a>
</li>
<li>
<a class="dropdown-item" href="#">DS</a>
</li>
<li>
<a class="dropdown-item" href="#">HTML</a>
</li>
<li>
<a class="dropdown-item" href="#">CSS</a>
</li>
<li>
<a class="dropdown-item" href="#">JS</a>
</li>
</ul>
</div>
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
|
Output:
Dropdown menu through anchor<a></a> tag: We can make a dropdown from an anchor <a></a> tag with any .btn class with some changes in the markup like adding data-bs-toggle=”dropdown” and aria-expanded=”false” as given below. For toggling, we need to use the .dropdown-toggle.
Example 2: This example illustrates the use of the anchor tag to make the dropdown menu in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
</head>
<body>
<h2 class="text-success">GeeksforGeeks</h2>
<div class="dropdown">
<h5>Dropdown using Anchor tag</h5>
<a class="btn btn-success dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown Link
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Algo</a>
</li>
<li>
<a class="dropdown-item" href="#">DS</a>
</li>
<li>
<a class="dropdown-item" href="#">HTML</a>
</li>
<li>
<a class="dropdown-item" href="#">CSS</a>
</li>
<li>
<a class="dropdown-item" href="#">JS</a>
</li>
</ul>
</div>
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
Color variant in dropdowns: We can make dropdown buttons of a variety of colors by making use of Bootstrap classes available for buttons such as .btn-primary for blue, .btn-danger for red, .btn-secondary for grey, etc.
Example 3: We have used the button classes in Bootstrap for making the button with a color variant. Here, this example illustrates the primary & success classes of Bootstrap. We can use the remaining classes in a similar way.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
</head>
<body>
<h2 class="text-success">GeeksforGeeks</h2>
<div class="dropdown px-3 py-3">
<h5 class="text-secondary">Dropdown Color Variant</h5>
<button class="btn btn-primary dropdown-toggle mx-2 my-2"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"> GFG Primary
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Algo</a>
</li>
<li>
<a class="dropdown-item" href="#">DS</a>
</li>
<li>
<a class="dropdown-item" href="#">HTML</a>
</li>
<li>
<a class="dropdown-item" href="#">CSS</a>
</li>
<li>
<a class="dropdown-item" href="#">JS</a>
</li>
</ul>
<button class="btn btn-success dropdown-toggle mx-2 my-2"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"> GFG Success
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Algo</a>
</li>
<li>
<a class="dropdown-item" href="#">DS</a>
</li>
<li>
<a class="dropdown-item" href="#">HTML</a>
</li>
<li>
<a class="dropdown-item" href="#">CSS</a>
</li>
<li>
<a class="dropdown-item" href="#">JS</a>
</li>
</ul>
</div>
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
Split dropdown with buttons: We can make split dropdowns in a button by adding an additional button with a .dropdown-toggle-split class for putting proper space around the dropdown caret.
Example 4: This example illustrates the split dropdown button in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
</head>
<body>
<h2 class="text-success">GeeksforGeeks</h2>
<h5 class="text-secondary">Split Dropdown</h5>
<div class="btn-group">
<button type="button"
class="btn btn-success">Split Dropdown
</button>
<button type="button"
class="btn btn-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false">
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Algo</a>
</li>
<li>
<a class="dropdown-item" href="#">DS</a>
</li>
<li>
<a class="dropdown-item" href="#">HTML</a>
</li>
<li>
<a class="dropdown-item" href="#">CSS</a>
</li>
<li>
<a class="dropdown-item" href="#">JS</a>
</li>
</ul>
</div>
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
Form in the Dropdown menu: In the following example, we have put a form inside a dropdown by wrapping the form inside a .dropdown-menu class. To know more about bootstrap forms go through the bootstrap forms article. Likewise, we can put anything inside the .dropdown-menu class to make it appear in the dropdown menu.
Example 5: This example shows the form inside the Dropdown menu in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
</head>
<body>
<h2 class="text-success">GeeksforGeeks</h2>
<h5 class="text-secondary">Form in the Dropdown menu</h5>
<div class="dropdown">
<button class="btn btn-success dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"> GFG Primary
</button>
<div class="dropdown-menu">
<form class="px-3 py-2">
<div class="mb-2">
<label class="form-label"> Username </label>
<input type="email"
class="form-control"
</div>
<div class="mb-2">
<label class="form-label"> Password </label>
<input type="password"
class="form-control"
placeholder="Password" />
</div>
<button type="submit" class="btn btn-danger"> Sign in
</button>
</form>
</div>
</div>
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
Dropdown in Navbar with the dark theme: We can definitely change the theme of the dropdown menu to match it with the navbar background. To do so we add a .dropdown-menu-dark class to the to an existing .dropdown-menu. Except for this, no other changes are required to the dropdown items.
Example 6: In this example, we have made the dark theme dropdown in the navbar in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
<title>GeeksforGeeks</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand"
href="#">GeeksforGeeks</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
aria-controls="navbarNavDarkDropdown"
aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">Food</a>
</li>
<li> <a class="dropdown-item" href="#">Swimming</a>
</li>
<li> <a class="dropdown-item" href="#">Flight</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
Similar Reads
Non-linear Components
In electrical circuits, Non-linear Components are electronic devices that need an external power source to operate actively. Non-Linear Components are those that are changed with respect to the voltage and current. Elements that do not follow ohm's law are called Non-linear Components. Non-linear Co
11 min read
JavaScript Tutorial
JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. JavaScript is an interpreted language that executes code line by line providing more flexibility. HTML adds Structure to a web page, CSS st
11 min read
Web Development
Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De
5 min read
Class Diagram | Unified Modeling Language (UML)
A UML class diagram is a visual tool that represents the structure of a system by showing its classes, attributes, methods, and the relationships between them. It helps everyone involved in a project—like developers and designers—understand how the system is organized and how its components interact
12 min read
Spring Boot Tutorial
Spring Boot is a Java framework that makes it easier to create and run Java applications. It simplifies the configuration and setup process, allowing developers to focus more on writing code for their applications. This Spring Boot Tutorial is a comprehensive guide that covers both basic and advance
10 min read
React Interview Questions and Answers
React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook created React. Developers with a Javascript background can easily develop web applications
15+ min read
HTML Tutorial
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
10 min read
JavaScript Interview Questions and Answers
JavaScript (JS) is the most popular lightweight, scripting, and interpreted programming language. JavaScript is well-known as a scripting language for web pages, mobile apps, web servers, and many other platforms. It is essential for both front-end and back-end developers to have a strong command of
15+ min read
Backpropagation in Neural Network
Backpropagation is also known as "Backward Propagation of Errors" and it is a method used to train neural network . Its goal is to reduce the difference between the model’s predicted output and the actual output by adjusting the weights and biases in the network. In this article we will explore what
10 min read
AVL Tree Data Structure
An AVL tree defined as a self-balancing Binary Search Tree (BST) where the difference between heights of left and right subtrees for any node cannot be more than one. The absolute difference between the heights of the left subtree and the right subtree for any node is known as the balance factor of
4 min read