Make Bulma Burger Menu Interactive

Bulma is a popular css framework based on flexbox. It is becoming one of the more widely used css frameworks, but the documentation is still lacking at times.

One of the less obvious examples is Bulma's navbar example. In Bulma's example, when you look at the page in a narrowed browser you see that the menus change into a burger icon. This is great. What's more impressive is that when you click on the burger icon a menu pops up.

What is not clear is that making the burger icon interactive requires JavaScript. If you look through the source of the Bulma example you will see that the site actually uses jQuery to make the burger icon interactive and clickable.

So if you are implementing a navbar and want to include an interactive burger menu, you will need to add some sort of JavaScript. Bulma originally came with bulma.js, but now is simply a css framework. The JavaScript has to be created by you. This is not too complex though.

To make the burger menu interactive, you need to toggle the .is-active class on both the burger menu element and then menu element for the menu(s) that you wish to show.

So lets say I have two elements, both taken from the Bulma example page. A burger menu element that looks like this:

<div class="navbar-burger burger" id="burger"> <span></span> <span></span> <span></span> </div> </div>

and a menu that looks like this:

<div id="navMenuExample" class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item " href="http://bulma.io/"> Home </a> ... </div> </div>

To make the burger menu icon actually work, all we need to do is add and remove the .is-active class to both #burger and #navMenuExample.

A simple function that does this is:

const toggleBurger = () => { let burgerIcon = document.getElementById('burger'); let dropMenu = document.getElementById('teamList'); burgerIcon.classList.toggle('is-active'); dropMenu.classList.toggle('is-active'); };

and then add an onclick event to the #burger element that calls toggleBurger. It would look something like:

<div class="navbar-burger burger" id="burger" onclick="toggleBurger()">

All you are doing is adding and removing a Bulma css class to two elements, but you need to do this through JavaScript as css does not handle click events.`