Bulma Dropup

Last Updated : 12 Feb, 2022

Bulma is a free and open-source CSS framework used for making beautiful and responsive websites. It is based on flexbox. In this article, we will be seeing how to make a dropup in Bulma.

Dropup is just like a dropdown but it opens upwards. To convert a dropdown to dropup you just have to add the is-up modifier to the dropdown component.

Bulma Dropup classes:

is-up: This class is used on the dropdown component to make it open upwards.

Syntax:

<div class="dropdown is-up">
    ...
</div>

Example: The below example illustrates the use of the is-up class to make a dropup in Bulma.

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <title>Bulma Dropup</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>p{ 
      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 Dropup 
    </b> 
    <div class="container is-fluid"> 
        <p><b>Normal Dropdown:</b></p> 
  
        <div class="dropdown"> 
            <div class="dropdown-trigger"> 
                <button class="button" 
                        aria-controls="dropdown-menu1"> 
                    <span>Select a topic</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 class="dropdown-item"> 
                        <p>Algorithms</p> 
                    </div> 
                    <div class="dropdown-item"> 
                        <p>DBMS</p> 
                    </div> 
                    <div class="dropdown-item"> 
                        <p>Data Structures</p> 
                    </div> 
                </div> 
            </div> 
        </div> 
        <p><b>Dropdown with <i>is-up</i> modifier:</b></p> 
  
        <div class="dropdown is-up"> 
            <div class="dropdown-trigger"> 
                <button class="button" 
                        aria-controls="dropdown-menu1"> 
                    <span>Select a topic</span> 
                    <span class="icon is-small"> 
                        <i class="fas fa-angle-up"></i> 
                    </span> 
                </button> 
            </div> 
            <div class="dropdown-menu" 
                 id="dropdown-menu1" 
                 role="menu"> 
                <div class="dropdown-content"> 
                    <div class="dropdown-item"> 
                        <p>Algorithms</p> 
                    </div> 
                    <div class="dropdown-item"> 
                        <p>DBMS</p> 
                    </div> 
                    <div class="dropdown-item"> 
                        <p>Data Structures</p> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
    <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>