Open In App

Bulma Hoverable or Toggable Dropdown

In this article, we’ll see Bulma Hoverable and Toggable dropdown. Bulma uses dropdowns for giving the users list of multiple items to select. Below we have discussed all three types of dropdown with their examples.

Bulma Hoverable or Toggle dropdown classes:



Syntax:

// Dropdown trigfer
<div class="dropdown">
    <div class="dropdown-trigger">
        ....
    </div>
</div>

// is-active dropdown
<div class="dropdown is-active">
    <div class="dropdown-trigger">
        ....
    </div>
</div>

// is-hoverable dropdown
<div class="dropdown is-hoverable">
    <div class="dropdown-trigger">
        ....
    </div>
</div>

Example 1: Below example illustrates the Bulma Hoverable and Toggable dropdown.






<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <div class="content container has-text-centered">
        <h1 class="title has-text-success">GeekforGeeks</h1>
        <h1 class="subtitle">Bulma Hoverable or Toggable Dropdown</h1>
  
        <div class="container m-4">
            <!-- Dropdown -->
            <div class="dropdown ">
                <div class="dropdown-trigger">
                    <button class="button" aria-haspopup="true"
                        aria-controls="dropdown-menu3">
                        <span>Normal dropdown</span>
                        <span class="icon is-small">
                            <i class="fas fa-angle-down" 
                                aria-hidden="true"></i>
                        </span>
                    </button>
                </div>
                <div class="dropdown-menu" id="dropdown-menu3" role="menu">
                    <div class="dropdown-content">
                        <a href="#" class="dropdown-item"> Java </a>
                        <a href="#" class="dropdown-item"> C++ </a>
                        <a href="#" class="dropdown-item"> Python </a>
                        <a href="#" class="dropdown-item"> C </a>
                        <hr class="dropdown-divider" />
                        <a href="#" class="dropdown-item"> DSA </a>
                    </div>
                </div>
            </div>
  
            <!-- Hoverable dropdown -->
            <div class="dropdown is-hoverable">
                <div class="dropdown-trigger">
                    <button class="button" aria-haspopup="true"
                        aria-controls="dropdown-menu4">
                        <span>Hoverable dropdown</span>
                        <span class="icon is-small">
                            <i class="fas fa-angle-down" aria-hidden="true"></i>
                        </span>
                    </button>
                </div>
                <div class="dropdown-menu" id="dropdown-menu4" role="menu">
                    <div class="dropdown-content">
                        <a href="#" class="dropdown-item"> Java </a>
                        <a href="#" class="dropdown-item"> C++ </a>
                        <a href="#" class="dropdown-item"> Python </a>
                        <a href="#" class="dropdown-item"> C </a>
                        <hr class="dropdown-divider" />
                        <a href="#" class="dropdown-item"> DSA </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        const dropdown =
            document.querySelector('.dropdown');
        const active =
            document.querySelector('.is-active')
        document.body.addEventListener('click', function () {
            if (active) {
                dropdown.classList.remove('is-active')
            }
        })
        dropdown.addEventListener('click', function (event) {
            event.stopPropagation();
            this.classList.toggle('is-active');
        });
    </script>
</body>
  
</html>

Output:

Example 2: Below example illustrates the Bulma Active dropdown.




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <div class="content container has-text-centered">
        <h1 class="title has-text-success">GeekforGeeks</h1>
        <h1 class="subtitle">Bulma Active Dropdown</h1>
  
        <div class="dropdown is-active">
            <div class="dropdown-trigger">
                <button class="button" aria-haspopup="true"
                    aria-controls="dropdown-menu3">
                    <span>Active dropdown</span>
                    <span class="icon is-small">
                        <i class="fas fa-angle-down" aria-hidden="true"></i>
                    </span>
                </button>
            </div>
            <div class="dropdown-menu" id="dropdown-menu3" role="menu">
                <div class="dropdown-content">
                    <a href="#" class="dropdown-item"> Java </a>
                    <a href="#" class="dropdown-item"> C++ </a>
                    <a href="#" class="dropdown-item"> Python </a>
                    <a href="#" class="dropdown-item"> C </a>
                    <hr class="dropdown-divider" />
                    <a href="#" class="dropdown-item"> DSA </a>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        const dropdown = document.querySelector(".dropdown");
        const active = document.querySelector(".is-active");
        document.body.addEventListener("click", function () {
            if (active) {
                dropdown.classList.remove("is-active");
            }
        });
        dropdown.addEventListener("click", function (event) {
            event.stopPropagation();
            this.classList.toggle("is-active");
        });
    </script>
</body>
  
</html>

Output:

Reference: https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable


Article Tags :