Bulma Hoverable or Toggable Dropdown

In this article, we'll see Bulma Hoverable and Toggable dropdown. Bulma uses dropdowns for giving the users list of multiple items to select. Below we have discussed all three types of dropdown with their examples.

Bulma Hoverable or Toggle dropdown classes:

• dropdown-trigger: This class is used to display the dropdown items when triggered by a click.
• is-active: This class is used to display dropdown items all the time.
• is-hoverable: This class is used to display the dropdown items when hovering over the dropdown trigger.

Syntax:

// Dropdown trigfer
<div class="dropdown">
 <div class="dropdown-trigger">
 ....
 </div>
</div>

// is-active dropdown
<div class="dropdown is-active">
 <div class="dropdown-trigger">
 ....
 </div>
</div>

// is-hoverable dropdown
<div class="dropdown is-hoverable">
 <div class="dropdown-trigger">
 ....
 </div>
</div>

Example 1: Below example illustrates the Bulma Hoverable and Toggable dropdown.

Output:

Example 2: Below example illustrates the Bulma Active dropdown.

Output:

Reference: https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable