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
Share your thoughts in the comments
Please Login to comment...