Bulma navbar dropdown with is-hoverable does not open on touch devices
0 reputation · 11 May 2025, 04:07 UTC
A Bulma navbar dropdown marked with the is-hoverable modifier opens on desktop hover but does not open when tapped on touch devices. The goal is to restore tap-to-open behavior on mobile while keeping a usable interaction for desktop users, without introducing a JavaScript dependency or breaking keyboard accessibility.
Because Bulma is a CSS-only framework, the navbar dropdown relies on default hover and click states rather than scripted pointer detection. The is-hoverable modifier forces the dropdown to appear only on :hover, which removes the default click-to-open fallback that touch browsers otherwise use. Bulma exposes the is-active class on the parent navbar-item as a mechanism for programmatic control, but toggling that class requires custom JavaScript. Teams therefore face a choice between removing the modifier and accepting a less responsive desktop hover experience, or keeping it and losing touch support.
Should the is-hoverable modifier be removed to rely on Bulma's default click-to-open behavior, or is the is-active class with a minimal JavaScript toggle the supported path? How do current Bulma versions expect keyboard users to access these dropdowns when hover-only styles are in play?