Published on

Getting the Bulma Burger Menu to work with React

Authors

Bulma is a purely CSS library. This is awesome but one issue that comes with this is that you have to add code to make the burger menu clickable/touchable:

Luckily this is a fairly common problem which is discussed in detail here and has a very elegant none-JavaScript solution here.

The key pieces from this snippet are firstly the HTML (which I have adapted to React and the newer version of Bulma):

{/* ... */}
            <label
              role="button"
              className="navbar-burger burger"
              aria-label="menu"
              aria-expanded="false"
              htmlFor="nav-toggle-state"
            >
              <span aria-hidden="true" />
              <span aria-hidden="true" />
              <span aria-hidden="true" />
            </label>
          </div>
          <input type="checkbox" id="nav-toggle-state" />

          <div className="navbar-menu">
{/* ... */}

This then has the accompanying CSS:

#nav-toggle-state {
  display: none;
}

#nav-toggle-state:checked ~ .navbar-menu {
  display: block;
}

The above works as:

  • The checkbox is hidden as per the first CSS class
  • The checkbox is clickable as the burger menu has been made a label for the hidden checkbox using htmlFor which is how you use the label for attribute in React.
    • The for attribute on a label means that if the label is clicked the element it is for will also be clicked. So clicking the burger menu is as if you are clicking the hidden input.
  • The ~ in the second CSS rule means activate the rule for navbar-menu which is a sibling of nav-toggle-state.
    • nav-toggle-state has to be at the same level in the DOM tree but before the navbar-menu.
    • See this answer for a very nice explanation of what the ~ means in CSS.