Navbar menu stays hidden after clicking burger icon without JavaScript toggle

Answer

Bulma does not provide an optional JavaScript helper for the navbar burger toggle; the toggle must be implemented by the developer.

Confirmed facts

• Bulma is a CSS‑only framework; no official JS bundle is shipped.
• The burger button uses the data‑target attribute to point to the menu’s id.
• Toggling the is‑active class on both the button and the target menu makes the menu visible per Bulma’s CSS.

Minimal, standards‑compliant script

document.addEventListener('DOMContentLoaded', function () {
  // Find all burger buttons
  document.querySelectorAll('.navbar-burger').forEach(function ($el) {
    $el.addEventListener('click', function () {
      var target = $el.dataset.target;
      var $target = document.getElementById(target);
      // Toggle is‑active on button and menu
      $el.classList.toggle('is-active');
      $target.classList.toggle('is-active');
      // Update ARIA attributes
      var isExpanded = $el.classList.contains('is-active');
      $el.setAttribute('aria-expanded', String(isExpanded));
      $el.setAttribute('aria-label', isExpanded ? 'Close menu' : 'Open menu');
    });
  });
});

Best‑practice notes and pitfalls

• Place the script at the end of <body> or run it after DOMContentLoaded to guarantee the elements exist.
• Avoid attaching listeners multiple times in single‑page apps; check if a listener is already present or use a delegated listener on a stable parent.
• Do not rely on any internal Bulma class names beyond .navbar-burger, .navbar-menu and is-active; these have remained stable across versions.
• If you use server‑side rendering, ensure the script does not execute before the DOM is hydrated to avoid mismatch warnings.