Bulma hamburger menu doesn't show items

Question

I am using Bulma as my CSS framework. I had issues making the hamburger menu work. The documentation is unclear about how the whole thing should function. I saw the menu correctly transforming from full menu to 3 lines when shrinking the screen, however I couldn't make it work.

Answer following...

Answer 1

What documentation doesn't state clearly is that both navbar-burger and navbar-menu classes need to toggle is-active property in order to show.

Here is my working solution in Vue, hope it helps someone:

<nav class="navbar is-info">
    <div class="navbar-brand">
        <a role="button" class="navbar-burger burger"
           :class="{ 'is-active': isHamburgerOpen }"
           @click="openHamburgerMenu"
           data-target="navMenu">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>
    <div id="navMenu"
         class="navbar-menu"
         :class="{ 'is-active': isHamburgerOpen }">
        <div class="navbar-end">
            <!-- menu content -->
        </div>
    </div>
</nav>

JS:

data() {
    return {
        isHamburgerOpen: false,
    }
},
methods : {
    openHamburgerMenu() {
        this.isHamburgerOpen = !this.isHamburgerOpen;
    }
}

No need to use jQuery. If going with vanilla JS just fetch 2 elements by ID and change their class programatically.