Skip to main content
The dropdown component is an interactive menu that displays a list of items when activated. It requires JavaScript to toggle the is-active class.

​
Basic Dropdown

A standard dropdown with a button trigger: 
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</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">
        Dropdown item
      </a>
      <a class="dropdown-item">
        Other dropdown item
      </a>
      <a href="#" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>

​
Structure

The dropdown component uses this structure:
  • dropdown - Main container
    • dropdown-trigger - Contains the trigger element
    • dropdown-menu - The dropdown menu (hidden by default)
      • dropdown-content - Content wrapper with styling
        • dropdown-item - Individual menu items
        • dropdown-divider - Horizontal separator

​
Active State

Add the is-active class to show the dropdown: 
<div class="dropdown is-active">
  <!-- dropdown content -->
</div>
You need to toggle the is-active class with JavaScript. The dropdown doesn’t automatically show/hide.

​
Hoverable Dropdown

Use is-hoverable to show the dropdown on hover (no JavaScript needed): 
<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <button class="button">
      <span>Hover me</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">Item 1</a>
      <a href="#" class="dropdown-item">Item 2</a>
      <a href="#" class="dropdown-item">Item 3</a>
    </div>
  </div>
</div>

​
Right Aligned

Align the dropdown menu to the right: 
<div class="dropdown is-right">
  <div class="dropdown-trigger">
    <button class="button">
      <span>Right aligned</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">Item</a>
    </div>
  </div>
</div>

​
Dropup

Make the dropdown appear above the trigger: 
<div class="dropdown is-up">
  <div class="dropdown-trigger">
    <button class="button">
      <span>Dropup</span>
      <span class="icon is-small">
        <i class="fas fa-angle-up"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">Item 1</a>
      <a href="#" class="dropdown-item">Item 2</a>
    </div>
  </div>
</div>

​
Dropdown Content

The dropdown content can contain more than just links: 
<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button">
      <span>Content</span>
    </button>
  </div>
  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
      </div>
      <hr class="dropdown-divider">
      <div class="dropdown-item">
        <p>This is some <strong>custom content</strong>.</p>
      </div>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        This is a link
      </a>
    </div>
  </div>
</div>

​
With Dividers

Separate groups of items with dividers: 
<div class="dropdown-content">
  <a href="#" class="dropdown-item">Action</a>
  <a href="#" class="dropdown-item">Another action</a>
  <hr class="dropdown-divider">
  <a href="#" class="dropdown-item">Settings</a>
  <a href="#" class="dropdown-item">Logout</a>
</div>

​
Active Item

Mark an item as active with is-active: 
<div class="dropdown-content">
  <a href="#" class="dropdown-item">Regular item</a>
  <a href="#" class="dropdown-item is-active">Active item</a>
  <a href="#" class="dropdown-item">Regular item</a>
</div>

​
JavaScript Example

Here’s a simple JavaScript example to toggle the dropdown: 
document.addEventListener('DOMContentLoaded', () => {
  // Get all dropdown elements
  const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');

  dropdowns.forEach((dropdown) => {
    const trigger = dropdown.querySelector('.dropdown-trigger');
    
    trigger.addEventListener('click', () => {
      dropdown.classList.toggle('is-active');
    });
  });

  // Close dropdowns when clicking outside
  document.addEventListener('click', (event) => {
    if (!event.target.closest('.dropdown')) {
      dropdowns.forEach((dropdown) => {
        dropdown.classList.remove('is-active');
      });
    }
  });
});

​
Modifiers

ClassDescription
is-activeShows the dropdown menu
is-hoverableShows dropdown on hover (no JS needed)
is-rightAligns dropdown menu to the right
is-upMakes dropdown appear above trigger
dropdown-item is-activeHighlights the active item

​
CSS Variables

VariableDefaultDescription
--bulma-dropdown-menu-min-width12remMinimum width of dropdown
--bulma-dropdown-content-offset0.25remSpace between trigger and menu
--bulma-dropdown-content-radiusRadius variableBorder radius
--bulma-dropdown-content-shadowShadow variableBox shadow

​
Accessibility

  • Use aria-haspopup="true" on the trigger button
  • Use aria-controls to reference the dropdown menu ID
  • Add role="menu" to the dropdown menu
  • Consider adding aria-expanded that toggles between true/false
The dropdown component requires JavaScript to function properly. Use is-hoverable if you need a CSS-only solution.

Build docs developers (and LLMs) love

Get started for freeTalk to us