Bulma | Dropdown
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 togglable 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.
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= <!-- Custom css --> <style> div.columns { margin-top: 80px; } </style></head><body> <!-- font-awesome cdn --> <script src= </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 samsung 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= <!-- FontAwesome Library --> <script src= </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 samsung 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= <!-- FontAwesome Library --> <script src= </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 samsung 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 samsung 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= <!-- FontAwesome Library --> <script src= </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 samsung 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:
Please Login to comment...