Bulma offers users a lightweight CSS framework that aims to take on the likes of Bootstrap. This tutorial will take you through how easy it is to create a responsive navigation bar with very little code.

Personally this was one of my first attempts at using Bulma and I found it very very easy to achieve such a slick navigation bar. My only gripe is the documentation isn’t as good as others such as Bootstrap.

As a trial I’ve created this tutorial as both a YouTube video and my standard text based article. Please follow me on YouTube to keep up-to-date with other tutorials I post, and let me know in the comments if you’ve enjoyed this format.

Video Tutorial

Getting Started with Bulma

To begin this tutorial I went over to bulma.io and copied their Starter Template. This gives you the basis of any HTML webpage, along with providing the necessary CSS files.

Once you’ve deleted the dummy body content you’ll end up with something like this.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bulma Navigation Tutorial</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20defer%20src%3D%22https%3A%2F%2Fuse.fontawesome.com%2Freleases%2Fv5.0.6%2Fjs%2Fall.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  </head>
  <body>

  </body>
</html>

From here we can start creating a standard HTML navigation bar using a combination of nav, div, and a elements. Additional to this is the use of span elements to create our “burger” (3 line mobile nav) icon.

Creating the Container

Our first bit of code is to create the nav container using the Bulma predefined classes. Here’s how we do it.

<nav class="navbar is-primary">
<div class="container">
</div>
</nav>

The main consideration here is the use of .is-primary in our nav class. This will give it a turquoise background with white text. Other options include –

  • .is-success for a green background
  • .is-info for a light blue background
  • .is-link for a navy blue background
  • .is-warning for a yellow background
  • .is-danger for a red background
  • .is-dark for a black/dark grey background
  • blank for a white background

Any of these options can be added into the class in place of .is-primary.

Adding the logo

The key part to any top navigation bar is normally the website logo. Within our navigation we now need to add the .navbar-brand container that will hold our logo.

As the brand container is considered the top level of the navigation menu we’ll also place our burger icon there.

We do this like so.

<div class="navbar-brand">
  <a class="navbar-item" href="#" style="font-weight:bold;">
    YourLogo
  </a>
  <span class="navbar-burger burger" data-target="navMenu">
    <span></span>
    <span></span>
    <span></span>
  </span>
</div>

The most important part of this code is actually the burger icon. Firstly we’ve added a separate class of .burger to find within our JavaScript. Secondly, we’ve set data-target="navMenu", which we’ll use to specify the #id we’ve allocated to our menu items.

Creating the Menu

Now this is starting to sound much like a food blog, but stay with me!

We now need to create the menu container, which is done using the class .navbar-menu. We’ll also assign the id="navMenu" (the one we specified above).

Next we create a second container that is used to determine the location of the navigation bar. You either need to use .navbar-end or .navbar-start. Have a play around and decide which you prefer.

Within these two containers we need to create our .navbar-item, and specify which is active using the class .is-active.

All of this together will look like this.

<div id="navMenu" class="navbar-menu">
<div class="navbar-end">
    <a href="#" class="navbar-item is-active">Home</a>
    <a href="#" class="navbar-item">Blog</a>
    <a href="#" class="navbar-item">Forum</a>
    <a href="#" class="navbar-item">Shop</a>
    <a href="#" class="navbar-item">Examples</a>
  </div>
</div>

And putting the whole menu together will give you the following.

<nav class="navbar is-primary">
<div class="container">
<div class="navbar-brand">
      <a class="navbar-item" href="#" style="font-weight:bold;">
        adam bray
      </a>
      <span class="navbar-burger burger" data-target="navMenu">
        <span></span>
        <span></span>
        <span></span>
      </span>
    </div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-end">
        <a href="#" class="navbar-item is-active">Home</a>
        <a href="#" class="navbar-item">Blog</a>
        <a href="#" class="navbar-item">Forum</a>
        <a href="#" class="navbar-item">Shop</a>
        <a href="#" class="navbar-item">Examples</a>
      </div>
</div>
</div>
</nav>

Such a nice navigation bar with very little effort so far. Now onto the clever bit.

The Magic (JavaScript)

Only a few years ago this would have been a nightmare to code, but given the recent leaps and bounds of JavaScript this is very quick and easy.

(function() {
  var burger = document.querySelector('.burger');
  var nav = document.querySelector('#'+burger.dataset.target);

  burger.addEventListener('click', function(){
    burger.classList.toggle('is-active');
    nav.classList.toggle('is-active');
  });
})();

Let me break that down for you.

  • Define a variable that looks for an element with the class of .burger
  • Define a variable that looks for an element with the #id defined in the .burger data-target attribute
  • Add a listener that runs when .burger is clicked
  • Toggle the class of .is-active on the .burger element and #navMenu

And that is it.

Conclusion

In very few lines of code we’re able to create a beautifully simply navigation bar that reacts to the size of the browser and gives mobile users a mobile menu.

Previously this tutorial would still be going through the CSS definitions at this point, but we’re done with ease.

Overall I’m very happy with Bulma as a CSS framework and I’ll continue to create more tutorials for you all.

Let me know your thoughts in the comments below.

Subscribe for Updates

Get notified about my latest content first and receive invitations for subscriber only competitions.

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.