Hamburger Menu With Bulma and Hyperscript


As part of a larger overhaul, I recently redid the navigation for this site and switched the CSS framework from Semantic UI to Bulma. The main reasons are that I find Bulma requires simpler HTML, and that it has no included JavaScript dependencies. JavaScript is needed for some features though, one of them being the burger menu.

Bulma has a navbar component that automatically adapts to touchscreen devices by hiding the navbar-menu item. It also supplies a burger menu item, navbar-burger, that is shown when the navbar-menu is hidden.

  <nav class="navbar">
    <div class="navbar-brand">
      <a role="button" class="navbar-burger" aria-label="menu">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
    <div class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item" href="/">Home</a>
        <a class="navbar-item" href="/blog/">Blog</a>

The navbar-menu is shown by setting the CSS class is-active on the navbar-menu item, and of course we would like that to happen when we click the burger menu. It would be easy enough to do it with vanilla JS, but I had heard good things about _hyperscript and wanted to try it out.

It turns out to be ridiculously simple, all I had to do was to modify the navbar-burger tag as follows:

  <a role="button"
     _="on click toggle .is-active on .navbar-menu then toggle .is-active on me">

The code is pretty much self explanatory, but to be clear the added line toggles .is-active on both the navbar-burger element itself and the navbar-menu, opening the menu and turning the burger menu into a cross. When clicked again it toggles it back. You can try it in the navbar above if you have a small screen browser.

I can't say I've ever been a fan of HyperTalk-like syntaxes, but for simple things like this it's works like a charm, and the code is so short! The _hyperscript site has a comparison between vanilla JS and _hyperscript to show how much more concise it is.

I love libraries that simplifies things.