Bulma Dropdown Content

Last Updated : 06 Apr, 2022

Bulma is a component-rich, modern, and lightweight CSS framework that is based on flexbox. It helps in building beautiful and responsive web interfaces easier and faster. In this article, we will be seeing what type of content can be used inside a dropdown component in Bulma.

So, a <a> tag can be used directly as a dropdown item but we can also use an <div> element as a dropdown item and fill the div element with whatever content we like. For example paragraphs, links, buttons, etc.

Bulma Dropdown Content Classes:

dropdown-item: This class represents a single item inside the dropdown. It can be a <a> tag or a <div> element.
dropdown-divider: This class is used to make a horizontal line called divider to separate the dropdown items if required.

Syntax:

<div class="dropdown-content">
    <div class="dropdown-item">
        ...
    </div>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">...</a>
</div>

Example: The below example shows how we can use <a> and <div> elements as dropdown items.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Dropdown Content</title>
    <link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
 
    <style>
        .container{
            margin-top: 30px;
        }
    </style>
</head>
 
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
    <b class="is-size-4">Bulma Dropdown Content</b>
    <div class="container is-fluid">
        <div class="dropdown">
            <div class="dropdown-trigger">
                <button class="button"
                        aria-controls="dropdown-menu1">
                    <span>Dropdown</span>
                    <span class="icon is-small">
                        <i class="fas fa-angle-down"></i>
                    </span>
                </button>
            </div>
            <div class="dropdown-menu"
                 id="dropdown-menu1" role="menu">
                <div class="dropdown-content">
                    <!-- div containing a paragraph -->
                    <div class="dropdown-item">
                         
<p>This is a paragraph inside a 
                              <code>div</code> element.
                          </p>
 
                    </div>
                    <!-- Divider -->
                    <div class="dropdown-divider"></div>
                    <!-- div containing buttons -->
                    <div class="dropdown-item">
                        <button class="button is-small 
                                       is-success">
                          GeeksforGeeks
                        </button>
                    </div>
                    <!-- Divider -->
                    <div class="dropdown-divider"></div>
                    <!-- <a> as dropdown item -->
                        <a href="https://www.geeksforgeeks.org"
                           class="dropdown-item">
                          Go to Home Page.
                       </a>
                </div>
            </div>
        </div>
    </div>
 
 
    <!-- JavaScript for opening and closing of dropdown -->
    <script>
        var triggers = 
            document.querySelectorAll(".dropdown .dropdown-trigger");
 
        triggers.forEach(function (trigger) {
            var isopen = false;
            trigger.addEventListener('click', function(){
                if(isopen){
                    trigger.parentElement.classList.remove("is-active");
                    isopen = false;
                }else{
                    trigger.parentElement.classList.add("is-active");
                    isopen = true;
                }
            })
        });
    </script>
</body>
 
</html>