Bulma Dropdown

The Dropdown component in Bulma creates interactive dropdown menus that can be toggled by clicking or hovering. Dropdowns are essential for navigation menus, action menus, and any interface that requires hiding secondary options until needed.

Basic Dropdown Structure

A dropdown consists of a trigger and a menu:

<div class="dropdown">
  <!-- Dropdown trigger -->
  <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"></i>
      </span>
    </button>
  </div>
  
  <!-- Dropdown menu -->
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">Dropdown item</a>
      <a href="#" 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>

Dropdown States

Active Dropdown

<!-- Dropdown is visible -->
<div class="dropdown is-active">
  <!-- Dropdown content -->
</div>

Hoverable Dropdown

<!-- Dropdown activates on hover -->
<div class="dropdown is-hoverable">
  <!-- Dropdown content -->
</div>

Dropdown Alignment

Right Aligned Dropdown

<div class="dropdown is-right">
  <div class="dropdown-trigger">
    <button class="button">Right aligned</button>
  </div>
  <div class="dropdown-menu">
    <div class="dropdown-content">
      <!-- Content -->
    </div>
  </div>
</div>

Centered Dropdown

<div class="dropdown is-centered">
  <div class="dropdown-trigger">
    <button class="button">Centered</button>
  </div>
  <div class="dropdown-menu">
    <div class="dropdown-content">
      <!-- Content -->
    </div>
  </div>
</div>

Dropdown Content Items

Basic Dropdown Items

<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 is-disabled">Disabled item</a>
  <hr class="dropdown-divider">
  <a href="#" class="dropdown-item">After divider</a>
</div>

Dropdown Items with Icons

<div class="dropdown-content">
  <a href="#" class="dropdown-item">
    <span class="icon">
      <i class="fas fa-edit"></i>
    </span>
    <span>Edit</span>
  </a>
  <a href="#" class="dropdown-item">
    <span class="icon">
      <i class="fas fa-copy"></i>
    </span>
    <span>Duplicate</span>
  </a>
  <a href="#" class="dropdown-item">
    <span class="icon">
      <i class="fas fa-trash"></i>
    </span>
    <span>Delete</span>
  </a>
</div>

Dropdown Items with Descriptions

<div class="dropdown-content">
  <a href="#" class="dropdown-item">
    <div>
      <p class="has-text-weight-semibold">Option 1</p>
      <p class="is-size-7 has-text-grey">Description for option 1</p>
    </div>
  </a>
  <a href="#" class="dropdown-item">
    <div>
      <p class="has-text-weight-semibold">Option 2</p>
      <p class="is-size-7 has-text-grey">Description for option 2</p>
    </div>
  </a>
</div>

Dropdown with Checkboxes and Radio Buttons

<div class="dropdown-content">
  <label class="dropdown-item">
    <input type="checkbox" checked> Checkbox option
  </label>
  <label class="dropdown-item">
    <input type="checkbox"> Another checkbox
  </label>
  <hr class="dropdown-divider">
  <label class="dropdown-item">
    <input type="radio" name="radio-group"> Radio option 1
  </label>
  <label class="dropdown-item">
    <input type="radio" name="radio-group"> Radio option 2
  </label>
</div>

Dropdown Sizes

<!-- Small dropdown -->
<div class="dropdown is-small">
  <div class="dropdown-trigger">
    <button class="button is-small">Small</button>
  </div>
  <!-- Menu content -->
</div>

<!-- Medium dropdown (default) -->
<div class="dropdown is-medium">
  <div class="dropdown-trigger">
    <button class="button">Medium</button>
  </div>
  <!-- Menu content -->
</div>

<!-- Large dropdown -->
<div class="dropdown is-large">
  <div class="dropdown-trigger">
    <button class="button is-large">Large</button>
  </div>
  <!-- Menu content -->
</div>

Dropdown Triggers

Button Trigger

<div class="dropdown-trigger">
  <button class="button">
    <span>Dropdown</span>
    <span class="icon is-small">
      <i class="fas fa-angle-down"></i>
    </span>
  </button>
</div>

Icon Trigger

<div class="dropdown-trigger">
  <button class="button">
    <span class="icon">
      <i class="fas fa-bars"></i>
    </span>
  </button>
</div>

Custom Element Trigger

<div class="dropdown-trigger">
  <div class="tags has-addons" style="cursor: pointer;">
    <span class="tag">Menu</span>
    <span class="tag is-primary">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
</div>

Avatar Trigger

<div class="dropdown-trigger">
  <figure class="image is-32x32" style="cursor: pointer;">
    <img class="is-rounded" src="avatar.jpg" alt="User menu">
  </figure>
</div>

Use Cases

1. Navigation Dropdown

<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <button class="button">
      <span>Products</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">
        <span class="icon">
          <i class="fas fa-laptop"></i>
        </span>
        <span>Electronics</span>
      </a>
      <a href="#" class="dropdown-item">
        <span class="icon">
          <i class="fas fa-tshirt"></i>
        </span>
        <span>Clothing</span>
      </a>
      <a href="#" class="dropdown-item">
        <span class="icon">
          <i class="fas fa-book"></i>
        </span>
        <span>Books</span>
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        <span class="icon">
          <i class="fas fa-tags"></i>
        </span>
        <span>All Categories</span>
      </a>
    </div>
  </div>
</div>

2. User Menu Dropdown

<div class="dropdown is-right">
  <div class="dropdown-trigger">
    <button class="button">
      <span class="icon">
        <i class="fas fa-user"></i>
      </span>
      <span>Account</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">
      <div class="dropdown-item">
        <p class="has-text-weight-semibold">John Doe</p>
        <p class="is-size-7 has-text-grey">john@example.com</p>
      </div>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        <span class="icon">
          <i class="fas fa-user-cog"></i>
        </span>
        <span>Profile Settings</span>
      </a>
      <a href="#" class="dropdown-item">
        <span class="icon">
          <i class="fas fa-cog"></i>
        </span>
        <span>Account Settings</span>
      </a>
      <a href="#" class="dropdown-item">
        <span class="icon">
          <i class="fas fa-shield-alt"></i>
        </span>
        <span>Security</span>
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item has-text-danger">
        <span class="icon">
          <i class="fas fa-sign-out-alt"></i>
        </span>
        <span>Log Out</span>
      </a>
    </div>
  </div>
</div>

3. Action Menu Dropdown

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button is-outlined">
      <span class="icon">
        <i class="fas fa-ellipsis-v"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        <span class="icon">
          <i class="fas fa-eye"></i>
        </span>
        <span>View Details</span>
      </a>
      <a href="#" class="dropdown-item">
        <span class="icon">
          <i class="fas fa-edit"></i>
        </span>
        <span>Edit</span>
      </a>
      <a href="#" class="dropdown-item">
        <span class="icon">
          <i class="fas fa-copy"></i>
        </span>
        <span>Duplicate</span>
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item has-text-danger">
        <span class="icon">
          <i class="fas fa-trash"></i>
        </span>
        <span>Delete</span>
      </a>
    </div>
  </div>
</div>

4. Filter Dropdown

<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <button class="button">
      <span>Filter by Status</span>
      <span class="icon is-small">
        <i class="fas fa-filter"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <label class="dropdown-item">
        <input type="checkbox" checked> All
      </label>
      <label class="dropdown-item">
        <input type="checkbox"> Active
      </label>
      <label class="dropdown-item">
        <input type="checkbox"> Inactive
      </label>
      <label class="dropdown-item">
        <input type="checkbox"> Pending
      </label>
      <hr class="dropdown-divider">
      <div class="dropdown-item">
        <button class="button is-small is-primary is-fullwidth">Apply</button>
      </div>
    </div>
  </div>
</div>

5. Language Selector Dropdown

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button">
      <span class="icon">
        <i class="fas fa-globe"></i>
      </span>
      <span>English</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 is-active">
        <span>English</span>
        <span class="icon is-pulled-right">
          <i class="fas fa-check"></i>
        </span>
      </a>
      <a href="#" class="dropdown-item">
        <span>Español</span>
      </a>
      <a href="#" class="dropdown-item">
        <span>Français</span>
      </a>
      <a href="#" class="dropdown-item">
        <span>Deutsch</span>
      </a>
      <a href="#" class="dropdown-item">
        <span>日本語</span>
      </a>
    </div>
  </div>
</div>

6. Date Range Dropdown

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button">
      <span class="icon">
        <i class="fas fa-calendar"></i>
      </span>
      <span>Last 30 days</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">Today</a>
      <a href="#" class="dropdown-item">Yesterday</a>
      <a href="#" class="dropdown-item is-active">Last 7 days</a>
      <a href="#" class="dropdown-item">Last 30 days</a>
      <a href="#" class="dropdown-item">This month</a>
      <a href="#" class="dropdown-item">Last month</a>
      <hr class="dropdown-divider">
      <div class="dropdown-item">
        <p class="has-text-weight-semibold mb-2">Custom Range</p>
        <div class="field">
          <input class="input is-small" type="date" placeholder="Start date">
        </div>
        <div class="field">
          <input class="input is-small" type="date" placeholder="End date">
        </div>
        <button class="button is-small is-primary is-fullwidth mt-2">Apply</button>
      </div>
    </div>
  </div>
</div>

Nested Dropdowns

<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <button class="button">Main Menu</button>
  </div>
  <div class="dropdown-menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">Option 1</a>
      
      <!-- Nested dropdown -->
      <div class="dropdown is-hoverable is-right">
        <div class="dropdown-trigger">
          <a class="dropdown-item">
            <span>More Options</span>
            <span class="icon is-small">
              <i class="fas fa-angle-right"></i>
            </span>
          </a>
        </div>
        <div class="dropdown-menu">
          <div class="dropdown-content">
            <a href="#" class="dropdown-item">Sub-option 1</a>
            <a href="#" class="dropdown-item">Sub-option 2</a>
            <a href="#" class="dropdown-item">Sub-option 3</a>
          </div>
        </div>
      </div>
      
      <a href="#" class="dropdown-item">Option 3</a>
    </div>
  </div>
</div>

Customization

/* Custom dropdown styles */
.dropdown {
  /* Custom animation */
  transition: all 0.3s ease;
}

.dropdown-menu {
  /* Custom shadow */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* Custom border */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  
  /* Custom animation */
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Custom dropdown items */
.dropdown-item {
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
  padding-left: 1.25rem;
}

.dropdown-item.is-active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* Custom dropdown divider */
.dropdown-divider {
  background-color: #e0e0e0;
  height: 2px;
  margin: 0.5rem 0;
}

/* Custom dropdown trigger */
.dropdown-trigger button {
  transition: all 0.3s ease;
}

.dropdown-trigger button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Custom dropdown width */
.dropdown.is-wide .dropdown-menu {
  min-width: 300px;
}

.dropdown.is-narrow .dropdown-menu {
  min-width: 150px;
}

JavaScript Integration

<!-- HTML Structure -->
<div class="dropdown" id="myDropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-expanded="false">
      <span>Dropdown</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">Option 1</a>
      <a href="#" class="dropdown-item">Option 2</a>
    </div>
  </div>
</div>

<!-- JavaScript to toggle dropdown -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const dropdown = document.querySelector('#myDropdown');
  const trigger = dropdown.querySelector('.dropdown-trigger');
  
  trigger.addEventListener('click', () => {
    dropdown.classList.toggle('is-active');
    
    // Update ARIA attribute
    const button = trigger.querySelector('button');
    const isExpanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !isExpanded);
  });
  
  // Close dropdown when clicking outside
  document.addEventListener('click', (event) => {
    if (!dropdown.contains(event.target)) {
      dropdown.classList.remove('is-active');
      const button = trigger.querySelector('button');
      button.setAttribute('aria-expanded', 'false');
    }
  });
});
</script>

Accessibility

<!-- Proper ARIA attributes -->
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" 
            aria-haspopup="true" 
            aria-expanded="false"
            aria-controls="dropdown-menu-1">
      Dropdown Button
    </button>
  </div>
  <div class="dropdown-menu" 
       id="dropdown-menu-1" 
       role="menu"
       aria-labelledby="dropdown-button">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item" role="menuitem">Item 1</a>
      <a href="#" class="dropdown-item" role="menuitem">Item 2</a>
    </div>
  </div>
</div>

<!-- Keyboard navigation support -->
<script>
document.addEventListener('keydown', (event) => {
  const dropdown = document.querySelector('.dropdown.is-active');
  if (!dropdown) return;
  
  const items = dropdown.querySelectorAll('.dropdown-item');
  const currentIndex = Array.from(items).findIndex(item => 
    item === document.activeElement
  );
  
  switch(event.key) {
    case 'ArrowDown':
      event.preventDefault();
      const nextIndex = (currentIndex + 1) % items.length;
      items[nextIndex].focus();
      break;
      
    case 'ArrowUp':
      event.preventDefault();
      const prevIndex = (currentIndex - 1 + items.length) % items.length;
      items[prevIndex].focus();
      break;
      
    case 'Escape':
      dropdown.classList.remove('is-active');
      dropdown.querySelector('.dropdown-trigger button').focus();
      break;
  }
});
</script>

Best Practices

Always include proper ARIA attributes for accessibility
Use clear, descriptive labels for dropdown triggers
Group related items with dividers
Limit dropdown items to 7-10 for usability
Consider mobile touch targets (minimum 44px height)
Use hoverable dropdowns sparingly on mobile devices
Implement keyboard navigation support
Close dropdowns when clicking outside
Provide visual feedback for selected/active items
Test dropdown functionality across different devices
Consider using icons to enhance understanding
Keep dropdown content organized and logical

Tip: For complex dropdowns with forms or custom content, consider using the Modal component instead, as it provides more space and better focus management.

Up next: Bulma Menu Component

Bulma CSS Tutorial