Bulma navbar dropdown with is-hoverable does not open on touch devices

To restore tap-to-open behavior on mobile while maintaining desktop hover, you **must use a minimal JavaScript toggle** for the is-active class. Removing the is-hoverable modifier will break the desktop hover experience.

Bulma is a CSS-only framework. When is-hoverable is applied, Bulma uses the CSS :hover pseudo-class to display the dropdown. On touch devices, 'hover' states are ambiguous; browsers often simulate them on the first tap, but they frequently fail to maintain that state for subsequent interactions, or they may trigger the link's href immediately instead of opening the menu.

The Technical Conflict

The is-hoverable modifier overrides the default interaction logic. In a standard Bulma navbar, the dropdown is toggled by the is-active class being added to the parent navbar-item. Because Bulma does not include its own JavaScript to manage this class, the is-hoverable modifier is essentially a CSS-only shortcut that assumes only pointer-based devices.

Recommended Solution: Hybrid Interaction

The most robust approach is to keep is-hoverable for desktop users but use a small script to toggle the is-active class for touch-based interactions. This ensures mobile users get a functional menu while desktop users keep their hover.

• Keep the is-hoverable class on your HTML.
• Add an event listener for clicks on the navbar-item.
• Toggle the is-active class only if the device is identified as a touch device.

// Simple implementation to toggle dropdowns on touch
document.querySelectorAll('.navbar-item.is-hoverable').forEach(item => {
  item.addEventListener('click', (e) => {
    // Only toggle if it's a touch device to prevent breaking desktop hover
    if (window.matchMedia("(pointer: coarse)").matches) {
      e.preventDefault();
      item.classList.toggle('is-active');
    }
  });
});;

Accessibility and Keyboard

Regarding keyboard users: Bulma's is-hoverable menus are notoriously inaccessible via keyboard because :hover does not trigger on focus. To fix this without a heavy library, you should ensure your CSS includes a focus-within rule:

/* Add this to your stylesheet to ensure keyboard users can navigate */
.navbar-item.is-hoverable:focus-within .navbar-dropdown {
  display: block;
}

Diagnostic Question: Are you using a framework like React or Vue to manage these classes, which would change how we handle the state of the is-active class?