Bootstrap 5 Dropdowns Auto close behavior
Last Updated :
05 Dec, 2022
Bootstrap 5 Dropdowns Auto close behavior is used to make the dropdowns close when we click outside of that dropdown or that particular button. Getting close when the user clicks outside is a necessary feature that every dropdown should have.
Bootstrap 5 Dropdowns Auto close behavior Class: There is no pre-defined class to close the dropdown automatically by clicking outside. There is an attribute called data-bs-auto-close that can perform the tasks.
Bootstrap 5 Dropdowns Auto close behavior Attribute:
- data-bs-auto-close: This attribute holds four values true, false, inside & outside, false does not allow to close the dropdown, and true does. Smae with the inside and outside click matter.
Syntax: The * can be substituted with any of the values like true, false, inside, or outside.
<div class="btn-group">
<button class="btn dropdown-toggle" type="button"
data-bs-toggle="dropdown" data-bs-auto-close="*" >
...
</button>
</div>
Below examples illustrate the Bootstrap 5 Dropdowns Auto close behavior:
Example 1: In this example, we will learn about autoClose true and false options
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 > Dropdowns Auto close behavior</ h3 >
< div class = "btn-group" >
< button class = "btn btn-primary dropdown-toggle"
type = "button"
data-bs-toggle = "dropdown"
data-bs-auto-close = "true"
aria-expanded = "false" >
GeeksforGeeks AutoClose True
</ button >
< ul class = "dropdown-menu" >
< li >< a class = "dropdown-item" href = "#" >Java</ a ></ li >
< li >< a class = "dropdown-item" href = "#" > C++</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >C#</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >Python</ a ></ li >
</ ul >
</ div >
< div class = "btn-group" >
< button class = "btn btn-success dropdown-toggle"
type = "button"
data-bs-toggle = "dropdown"
data-bs-auto-close = "false"
aria-expanded = "false" >
GeeksforGeeks AutoClose False
</ button >
< ul class = "dropdown-menu" >
< li >< a class = "dropdown-item" href = "#" >Java</ a ></ li >
< li >< a class = "dropdown-item" href = "#" > C++</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >C#</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >Python</ a ></ li >
</ ul >
</ div >
</ div >
</ body >
</ html >
|
Output:
Dropdown auto close behavior
Example 2: In this example, we will learn about autoClose inside and outside options
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 > Dropdowns Auto close behavior</ h3 >
< div class = "btn-group" >
< button class = "btn btn-primary dropdown-toggle"
type = "button"
data-bs-toggle = "dropdown"
data-bs-auto-close = "inside"
aria-expanded = "false" >
GeeksforGeeks AutoClose Inside
</ button >
< ul class = "dropdown-menu" >
< li >< a class = "dropdown-item" href = "#" >Java</ a ></ li >
< li >< a class = "dropdown-item" href = "#" > C++</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >C#</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >Python</ a ></ li >
</ ul >
</ div >
< div class = "btn-group" >
< button class = "btn btn-success dropdown-toggle"
type = "button"
data-bs-toggle = "dropdown"
data-bs-auto-close = "outside"
aria-expanded = "false" >
GeeksforGeeks AutoClose Outside
</ button >
< ul class = "dropdown-menu" >
< li >< a class = "dropdown-item" href = "#" >Java</ a ></ li >
< li >< a class = "dropdown-item" href = "#" > C++</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >C#</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >Python</ a ></ li >
</ ul >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#auto-close-behavior
Share your thoughts in the comments
Please Login to comment...