Bulma Menu

The Menu component in Bulma is a vertical navigation component perfect for sidebars, admin panels, and any application requiring a hierarchical menu structure. It supports nested items, icons, labels, and various states.

Basic Menu Structure

The basic menu consists of an aside.menu wrapper and nested lists:

<!-- Basic menu structure -->
<aside class="menu">
  <p class="menu-label">General</p>
  <ul class="menu-list">
    <li><a>Dashboard</a></li>
    <li><a>Customers</a></li>
  </ul>
  
  <p class="menu-label">Administration</p>
  <ul class="menu-list">
    <li><a>Team Settings</a></li>
    <li><a>Manage Your Team</a></li>
  </ul>
</aside>

Menu Components

Nested Menu Items

Create hierarchical menus with nested items:

<aside class="menu">
  <p class="menu-label">Admin</p>
  <ul class="menu-list">
    <!-- Parent item -->
    <li>
      <a class="has-arrow">Team Settings</a>
      <!-- Nested menu -->
      <ul>
        <li><a>Members</a></li>
        <li><a>Plugins</a></li>
        <li><a>Add a member</a></li>
      </ul>
    </li>
    
    <!-- Another parent -->
    <li>
      <a>Invitations</a>
    </li>
    
    <!-- Multi-level nesting -->
    <li>
      <a>Authentication</a>
      <ul>
        <li><a>Users</a></li>
        <li>
          <a>Roles</a>
          <ul>
            <li><a>Admin</a></li>
            <li><a>Editor</a></li>
            <li><a>Viewer</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</aside>

Active and Hover States

Add the is-active class to highlight the current page:

<ul class="menu-list">
  <!-- Active item -->
  <li><a class="is-active">Dashboard</a></li>
  
  <!-- Regular items -->
  <li><a>Analytics</a></li>
  <li><a>Reports</a></li>
  
  <!-- Active parent with active child -->
  <li>
    <a class="is-active">Settings</a>
    <ul>
      <li><a class="is-active">Profile</a></li>
      <li><a>Security</a></li>
      <li><a>Notifications</a></li>
    </ul>
  </li>
</ul>

Menu with Icons

Combine menus with icons for better visual hierarchy:

<aside class="menu">
  <p class="menu-label">Navigation</p>
  <ul class="menu-list">
    <li>
      <a>
        <span class="icon">
          <i class="fas fa-home"></i>
        </span>
        Dashboard
      </a>
    </li>
    <li>
      <a>
        <span class="icon">
          <i class="fas fa-users"></i>
        </span>
        Team
      </a>
    </li>
    <li>
      <a>
        <span class="icon">
          <i class="fas fa-chart-bar"></i>
        </span>
        Analytics
      </a>
    </li>
    <li>
      <a>
        <span class="icon">
          <i class="fas fa-cog"></i>
        </span>
        Settings
        <!-- Badge/notification -->
        <span class="tag is-danger is-rounded ml-auto">3</span>
      </a>
    </li>
  </ul>
</aside>

Responsive Sidebar Menu

Create a responsive sidebar that works on all devices:

<div class="columns">
  <!-- Sidebar Menu -->
  <div class="column is-3">
    <aside class="menu">
      <p class="menu-label is-hidden-touch">
        <span class="icon"><i class="fas fa-bars"></i></span>
        Main Menu
      </p>
      <ul class="menu-list">
        <li>
          <a class="is-active">
            <span class="icon"><i class="fas fa-home"></i></span>
            <span class="menu-text">Dashboard</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon"><i class="fas fa-shopping-cart"></i></span>
            <span class="menu-text">Products</span>
          </a>
        </li>
        <!-- More items -->
      </ul>
    </aside>
  </div>
  
  <!-- Main Content -->
  <div class="column is-9">
    <div class="content">
      <!-- Page content here -->
    </div>
  </div>
</div>

Menu Customization Options

Borderless Menu

<!-- Remove borders and background -->
<aside class="menu is-borderless">
  <ul class="menu-list">
    <li><a>Minimal Style</a></li>
    <li><a>Clean Design</a></li>
  </ul>
</aside>

Compact Menu

<!-- Smaller spacing -->
<aside class="menu is-compact">
  <ul class="menu-list">
    <li><a>Compact Item 1</a></li>
    <li><a>Compact Item 2</a></li>
  </ul>
</aside>

Menu with Dividers

<aside class="menu">
  <p class="menu-label">Section 1</p>
  <ul class="menu-list">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
  
  <!-- Horizontal divider -->
  <hr class="menu-divider" />
  
  <p class="menu-label">Section 2</p>
  <ul class="menu-list">
    <li><a>Item 3</a></li>
    <li><a>Item 4</a></li>
  </ul>
</aside>

Interactive Menu with JavaScript

Add interactivity for expandable/collapsible menus:

<!-- HTML Structure -->
<aside class="menu">
  <ul class="menu-list">
    <li>
      <a class="menu-toggle" data-target="submenu1">
        <span>Settings</span>
        <span class="icon is-pulled-right">
          <i class="fas fa-angle-down"></i>
        </span>
      </a>
      <ul class="submenu" id="submenu1">
        <li><a>Profile</a></li>
        <li><a>Security</a></li>
      </ul>
    </li>
  </ul>
</aside>

<!-- JavaScript for toggle -->
<script>
document.querySelectorAll('.menu-toggle').forEach(toggle => {
  toggle.addEventListener('click', () => {
    const target = document.getElementById(toggle.dataset.target);
    target.classList.toggle('is-hidden');
    const icon = toggle.querySelector('.icon i');
    icon.classList.toggle('fa-angle-down');
    icon.classList.toggle('fa-angle-up');
  });
});
</script>

Practical Menu Examples

Admin Dashboard Menu

<aside class="menu">
  <div class="menu-header has-text-centered mb-4">
    <h4 class="title is-4">Admin Panel</h4>
  </div>
  
  <p class="menu-label">Main</p>
  <ul class="menu-list">
    <li><a class="is-active"><i class="fas fa-tachometer-alt mr-2"></i> Dashboard</a></li>
    <li><a><i class="fas fa-chart-line mr-2"></i> Analytics</a></li>
  </ul>
  
  <p class="menu-label">Content</p>
  <ul class="menu-list">
    <li>
      <a><i class="fas fa-shopping-cart mr-2"></i> Products</a>
      <ul>
        <li><a>All Products</a></li>
        <li><a>Add New</a></li>
        <li><a>Categories</a></li>
      </ul>
    </li>
    <li>
      <a><i class="fas fa-file-alt mr-2"></i> Pages</a>
      <ul>
        <li><a>All Pages</a></li>
        <li><a>Add New</a></li>
      </ul>
    </li>
  </ul>
  
  <p class="menu-label">User Management</p>
  <ul class="menu-list">
    <li><a><i class="fas fa-users mr-2"></i> Users</a></li>
    <li><a><i class="fas fa-user-shield mr-2"></i> Roles</a></li>
    <li><a><i class="fas fa-cog mr-2"></i> Permissions</a></li>
  </ul>
  
  <div class="menu-footer mt-6">
    <a class="button is-danger is-outlined is-fullwidth">
      <i class="fas fa-sign-out-alt mr-2"></i> Logout
    </a>
  </div>
</aside>

E-commerce Filter Menu

<aside class="menu">
  <p class="menu-label">Filters</p>
  
  <!-- Price Range -->
  <div class="menu-filter mb-4">
    <p class="has-text-weight-bold mb-2">Price Range</p>
    <input class="slider is-fullwidth" step="50" min="0" max="1000" value="500" type="range">
    <div class="is-flex is-justify-content-space-between mt-1">
      <span>$0</span>
      <span>$500</span>
      <span>$1000</span>
    </div>
  </div>
  
  <!-- Categories -->
  <p class="has-text-weight-bold mb-2">Categories</p>
  <ul class="menu-list">
    <li>
      <label class="checkbox">
        <input type="checkbox" checked>
        Electronics
      </label>
    </li>
    <li>
      <label class="checkbox">
        <input type="checkbox">
        Clothing
      </label>
    </li>
    <li>
      <label class="checkbox">
        <input type="checkbox">
        Home & Garden
      </label>
    </li>
  </ul>
  
  <!-- Brand -->
  <p class="has-text-weight-bold mb-2 mt-4">Brand</p>
  <div class="field">
    <div class="control">
      <input class="input is-small" type="text" placeholder="Search brands...">
    </div>
  </div>
  
  <!-- Apply Filters Button -->
  <button class="button is-primary is-fullwidth mt-4">
    Apply Filters
  </button>
</aside>

CSS Variables for Customization

Best Practices

• Use <aside> tag for semantic sidebar menus
• Keep menu labels concise and clear
• Use icons to improve visual scanning
• Highlight the current page with is-active class
• Consider mobile users - make menus responsive
• Use appropriate nesting depth (2-3 levels max)
• Add keyboard navigation support for accessibility
• Test with screen readers for accessibility compliance

Up next: Bulma Message Component