Aquileo | Bootstrap 5 Dropdowns Auto close behavior

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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <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>
</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:

Example 2: In this example, we will learn about autoClose inside and outside options

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <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>
</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

Bootstrap 5 Dropdowns Auto close behavior

Explore