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 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 separater between the two items.

Example 1: This example shows the creation of a simple dropdown using Bulma.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right



Output:

Example 2: This example shows the creation of a hoverable dropdown using Bulma.



html

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right



Output:

Example 3: This example shows the creation of different alignment dropdowns using Bulma.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right



Output:

Example 4: This example shows the creation of a “dropup” using Bulma.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right



Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.