basic Bulma CSS Navbar burger Stimulus JS controller

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="navbar"
export default class extends Controller {
  static targets = [ "menu", "burger" ]
  
  toggle() {
    this.menuTarget.classList.toggle('is-active')
    this.burgerTarget.classList.toggle('is-active')
  }
}

<nav class="navbar" role="navigation" aria-label="main navigation" data-controller="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      LOGO
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-navbar-target="burger" data-action="click->navbar#toggle">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div class="navbar-menu" data-navbar-target="menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item">
        Documentation
      </a>
    </div>
  </div>
</nav>