Open In App

Bulma | Dropdown

Improve
Improve
Like Article
Like
Save
Share
Report

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.

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: 
 

 



Last Updated : 28 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads