Bootstrap 5 Dropdowns Options
Last Updated :
22 Dec, 2022
Bootstrap 5 Dropdowns Options can be passed through the data attributes or JavaScript.
Bootstrap 5 Dropdowns Options:
- Using function with popperConfig: We can use this by configuring the JavaScript file.
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Syntax:
<tag class="dropdown"
data-bs-toggle="dropdown"
data-bs-* = "..."
</tag>
Note: * can be replaced with option name.
- data-bs-offset: This attribute specifies the distance between the dropdown menu and the reference element in pixels.
- data-bs-reference : This attribute specifies the element that should be used as a reference for the position of the dropdown menu.
- data-bs-toggle: This attribute is used to toggle the dropdown menu. It should be set to “dropdown”.
- data-bs-boundary: This attribute specifies the boundary within which the dropdown menu should be contained. The possible values are “parent”, “viewport”, and “scrollParent”.
Example 1: In this example, we will demonstrate the dropdown data-bs-offset option.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Dropdown options</h3>
<div class="dropdown">
<button type="button"
class="btn btn-primary dropdown-toggle"
id="dropdownMenuOffset"
data-bs-toggle="dropdown"
aria-expanded="false" data-bs-offset="20,10">
Offset
</button>
<ul class="dropdown-menu"
aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">
DSA</a>
</li>
<li>
<a class="dropdown-item" href="#">
Python
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Java
</a>
</li>
</ul>
</div>
</center>
</body>
</html>
|
Output:
Example 2: In this example, we demonstrate data-bs-reference dropdown option.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Dropdown options</h3>
<div class="btn-group">
<button type="button" class="btn btn-primary">
Reference
</button>
<button type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
id="dropdownMenuReference"
data-bs-toggle="dropdown"
aria-expanded="false"
data-bs-reference="parent">
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul class="dropdown-menu"
aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">
Java</a></li>
<li><a class="dropdown-item" href="#">
Python</a></li>
<li><a class="dropdown-item" href="#">
C++</a></li>
</ul>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#options
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...