Bulma | Dropdown

10 Aug, 2021
Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
The dropdown component is a container for a dropdown button and a dropdown menu. Using dropdown and its subclasses, an interactive dropdown menu can be implemented. The dropdown component includes several other components that can be added to design the content. These components are listed below:
dropdown-trigger: It is the container for the dropdown button.
dropdown-menu: It is the container for the toggable menu. It is hidden by default. dropdown-content: It is the dropdown box. It has the white background with shadow. dropdown-item: It represents each item of the dropdown.dropdown-divider: It is the horizontal line separator between the two items.
dropdown-content: It is the dropdown box. It has the white background with shadow. dropdown-item: It represents each item of the dropdown.dropdown-divider: It is the horizontal line separator between the two items.
dropdown-item: It represents each item of the dropdown.
dropdown-divider: It is the horizontal line separator between the two items.
Example 1: This example shows the creation of a simple dropdown using Bulma.
html
<!DOCTYPE html><html> <head>  <title>Bulma Dropdown</title>   <!-- Include Bulma CSS -->  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>   <!-- Custom css -->  <style>    div.columns {      margin-top: 80px;    }  </style></head> <body>  <!-- font-awesome cdn -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>  </script>   <div class='container has-text-centered'>    <div class='columns is-mobile is-centered'>      <div class='column is-5'>        <div class="dropdown is-active">          <div class="dropdown-trigger">            <button class="button"                    aria-haspopup="true"                    aria-controls="dropdown-menu">              <span>Todos</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-menu"               role="menu">            <div class="dropdown-content">              <a href="#" class="dropdown-item">                Design a custom database to                store your daily activity              </a>               <a href="#" class="dropdown-item">                Take pictures of beautiful flowers              </a>               <a href="#" class="dropdown-item">                Ride to a horse and                write your experience              </a>               <a href="#" class="dropdown-item">                Go for a trip with bike              </a>               <a href="#" class="dropdown-item">                Design a custom database to                store your daily activity              </a>               <a href="#" class="dropdown-item">                Buy a sumsung headset              </a>               <a href="#" class="dropdown-item">                Listen music for one hour              </a>               <a href="#" class="dropdown-item">                Go for a morning walk              </a>            </div>          </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: This example shows the creation of a hoverable dropdown using Bulma. 
html
<!DOCTYPE html><html> <head>  <title>Bulma Dropdown</title>   <!-- Include Bulma CSS -->  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>   <!-- FontAwesome Library -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>  </script>   <!-- Custom CSS -->  <style>    div.columns {      margin-top: 80px;    }  </style></head> <body>  <div class='container has-text-centered'>    <div class='columns is-mobile is-centered'>      <div class='column is-5'>        <div class="dropdown is-hoverable">          <div class="dropdown-trigger">            <button class="button"                    aria-haspopup="true"                    aria-controls="dropdown-menu">              <span>Todos</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-menu"               role="menu">            <div class="dropdown-content">              <a href="#" class="dropdown-item">                Design a custom database to store                your daily activity              </a>               <a href="#" class="dropdown-item">                Take pictures of beautiful                flowers              </a>               <a href="#" class="dropdown-item">                Ride to a horse and write                your experience              </a>               <a href="#" class="dropdown-item">                Go for a trip with bike              </a>               <a href="#" class="dropdown-item">                Design a custom database                to store your daily activity              </a>               <a href="#" class="dropdown-item">                Buy a sumsung headset              </a>               <a href="#" class="dropdown-item">                Listen music for one hour              </a>               <a href="#" class="dropdown-item">                Go for a morning walk              </a>            </div>          </div>        </div>      </div>    </div>  </div></body></html>
 Output:  
Example 3: This example shows the creation of different alignment dropdowns using Bulma. 
html
<!DOCTYPE html><html> <head>  <title>Bulma Dropdown</title>   <!-- Include Bulma CSS -->  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>   <!-- FontAwesome Library -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>  </script>   <!-- Custom CSS -->  <style>    div.columns {      margin-top: 80px;    }  </style></head> <body>  <div class='container has-text-centered'>    <div class='columns is-mobile is-centered'>      <div class='column is-5'>        <div class="dropdown is-hoverable">          <div class="dropdown-trigger">            <button class="button"                    aria-haspopup="true"                    aria-controls="dropdown-menu">              <span>Left Aligned Todos</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-menu"               role="menu">            <div class="dropdown-content">              <a href="#" class="dropdown-item">                Design a custom database                to store your daily activity              </a>               <a href="#" class="dropdown-item">                Take pictures of beautiful                flowers              </a>               <a href="#" class="dropdown-item">                Ride to a horse and write                your experience              </a>               <a href="#" class="dropdown-item">                Go for a trip with bike              </a>               <a href="#" class="dropdown-item">                Design a custom database                to store your daily activity              </a>               <a href="#" class="dropdown-item">                Buy a sumsung headset              </a>               <a href="#" class="dropdown-item">                Listen music for one hour              </a>               <a href="#" class="dropdown-item">                Go for a morning walk              </a>            </div>          </div>        </div>      </div>       <div class='column is-5'>        <div class="dropdown is-right is-hoverable">          <div class="dropdown-trigger">            <button class="button"                    aria-haspopup="true"                    aria-controls="dropdown-menu">              <span>Right Aligned Todos</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-menu"               role="menu">            <div class="dropdown-content">              <a href="#" class="dropdown-item">                Design a custom database                to store your daily activity              </a>               <a href="#" class="dropdown-item">                Take pictures of beautiful                flowers              </a>               <a href="#" class="dropdown-item">                Ride to a horse and write                your experience              </a>               <a href="#" class="dropdown-item">                Go for a trip with bike              </a>               <a href="#" class="dropdown-item">                Design a custom database                to store your daily activity              </a>               <a href="#" class="dropdown-item">                Buy a sumsung headset              </a>               <a href="#" class="dropdown-item">                Listen music for one hour              </a>               <a href="#" class="dropdown-item">                Go for a morning walk              </a>            </div>          </div>        </div>      </div>    </div>  </div></body></html>
 Output:  
Example 4: This example shows the creation of a “dropup” using Bulma. 
html
<!DOCTYPE html><html> <head>  <title>Bulma Dropdown</title>   <!-- Include Bulma CSS -->  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>   <!-- FontAwesome Library -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>  </script>   <!-- Custom CSS -->  <style>    div.columns {      margin-top: 330px;    }  </style></head> <body>  <div class='container has-text-centered'>    <div class='columns is-mobile is-centered'>      <div class='column is-5'>        <div class="dropdown is-up is-hoverable">          <div class="dropdown-trigger">            <button class="button"                    aria-haspopup="true"                    aria-controls="dropdown-menu">              <span>Left Aligned Todos</span>              <span class="icon is-small">                <i class="fas fa-angle-up"                   aria-hidden="true"></i>              </span>            </button>          </div>           <div class="dropdown-menu"               id="dropdown-menu"               role="menu">            <div class="dropdown-content">              <a href="#" class="dropdown-item">                Design a custom database                to store your daily activity              </a>               <a href="#" class="dropdown-item">                Take pictures of beautiful                flowers              </a>               <a href="#" class="dropdown-item">                Ride to a horse and write                your experience              </a>               <a href="#" class="dropdown-item">                Go for a trip with bike              </a>               <a href="#" class="dropdown-item">                Design a custom database                to store your daily activity              </a>               <a href="#" class="dropdown-item">                Buy a sumsung headset              </a>               <a href="#" class="dropdown-item">                Listen music for one hour              </a>               <a href="#" class="dropdown-item">                Go for a morning walk              </a>            </div>          </div>        </div>      </div>    </div>  </div></body></html>
 Output:  
 
anikakapoor
Bulma
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.