In my website header, the hamburger menu is rendered by the following code without any javascript.

<a
          role="button"
          className="navbar-burger burger"
          aria-label="menu"
          aria-expanded="false"
          data-target="navbarHeader"
        >
          <span aria-hidden="true" />
          <span aria-hidden="true" />
          <span aria-hidden="true" />
</a>

<div id="navbarHeadera" className="navbar-menu">
  // nav menu content......
</div>

To make Bulma hamburger menu work, simply add an onClick function and use javascript to add/remove is-active class to the menu.

 <a
          role="button"
          className="navbar-burger burger"
          aria-label="menu"
          aria-expanded="false"
          data-target="navbarHeader"
          onClick={() => {
            var burger = document.querySelector('.burger')
            var nav = document.querySelector('#navbarHeader')
            burger.classList.toggle('is-active')
            nav.classList.toggle('is-active')
          }}
        >
          <span aria-hidden="true" />
          <span aria-hidden="true" />
          <span aria-hidden="true" />
        </a>

About Me

I am a self-taught developer who is passionate about software development, entrepreneurship and finance. I love to write about my daily life at work and outside work.

You can find more about me on  Kenneth Au LinkedIn

Previous
Next