/ tech

Bulma Burger: Creating A Mobile Navbar With Bulma And Vue

Lately I have been learning Vue.js. In starting from a scratch Vue project, I weighed options of a CSS framework to use. I've used Bootstrap in the past, but I like how Bulma can function without jQuery and that it is completely built on flexbox (plus it looked like a cool thing to learn).

In creating a simple layout I started with a header and a few simple routes. Bulma has a cool navbar component that makes it easy to get things going.

BulmaBurger

The navbar component is of course responsive out of the box, but with Bulma being CSS-only, there is not a way to open the menu in a small/mobile view.

I went searching for a solution that worked with Vue, but it took a bit of searching and a little while to put the pieces together. In the spirit of Chris Coyier, I decided to create this post here. Hopefully your skimming ability was able to ignore all of this fluff and get right to the solution below.

The trick is creating a simple variable in Vue that defaults to false and can change on click.

export default {
    data: function() {
        return {
            isOpen: false
        }
    }
}

Now we can use Vue's v-bind to flip the appropriate Bulma class on and off. Here's the whole template:

<nav class="navbar is-light" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <img src="https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/001/036/square_256/vue.png">
            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" @click="isOpen = !isOpen" v-bind:class="{'is-active': isOpen}">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div class="navbar-menu" v-bind:class="{'is-active': isOpen}">
            <div class="navbar-end">
                <router-link to="/" class="navbar-item is-tab">Home</router-link>
                <router-link to="/about" class="navbar-item is-tab">About</router-link>
                <router-link to="/else" class="navbar-item is-tab">Something Else</router-link>
            </div>
        </div>
    </nav>

And there you have it! When the burger icon is clicked, the isOpen variable simply gets changed to the opposite boolean value and the is-active Bulma class is toggled.

thing