Skip to content
Related Articles

Related Articles

Bulma Hoverable or Toggable Dropdown

Improve Article
Save Article
  • Last Updated : 28 Feb, 2022
Improve Article
Save Article

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:

  • dropdown-trigger: This class is used to display the dropdown items when triggered by a click.
  • is-active: This class is used to display dropdown items all the time.
  • is-hoverable: This class is used to display the dropdown items when hovering over the dropdown trigger.

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.

HTML




<!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.

HTML




<!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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!