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/bootstrap@5.0.2/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/bootstrap@5.0.2/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"
placeholder="email@example.com" />
</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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...