Bulma - Navigation Bar

Bulma

Bulma Material Design

Animation Observer

Supplementary Article for Sass.

Download Tutorial Source.

Local Group

Preface

Goal: Common navigation bar.

It is smilar to bootstrap, that would make your site the same as any other website.

1: Minimal

Having Bulma navigation bar is simple. You can examine each class in Bulma official documentaion.

tutor-02/21-navbar-minimal.html

gitlab.com/…/21-navbar-minimal.html.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Letters to my Bulma</title>

    <link rel="stylesheet" type="text/css" href="css/bulma.css">

</head>
<body>

  <!-- header -->
  <nav class="navbar is-fixed-top is-dark">
    <div class="navbar-brand">
      <a class="navbar-item">
        Home
      </a>
    </div>
  </nav>

</body>
</html>

You can see the respective result as below figure.

Bulma Navigation Bar: Minimal

Directory Preparation

Now consider create directory for respective assets:

css
js
images

Bulma: Directory Preparation

We are going to need them for the rest of this chapter.

2: Simple

Consider change the body part of html a bit. Put some stuff in the navigation header such as logo.

Skeleton

Here I represent navbar-menu for use with responsive design later.

tutor-02/22-navbar-simple.html

gitlab.com/…/22-navbar-simple.html.

<body>

  <!-- header -->
  <nav role="navigation" aria-label="main navigation"
       class="navbar is-fixed-top is-dark">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img src="images/logo-gear.png" alt="Home" />
      </a>
      <a class="navbar-item">
        Blog
      </a>
    </div>

    <div id="navbarBulma" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
          About
        </a>
      </div>
    </div>
  </nav>

</body>

You can have a look at the expected result in image below:

Bulma Navigation Bar: Simple

Assets: Logo

You are free to use your custom logo. I actually made some logo, and here we can use it as an example for this guidance.

tutor-02/images/logo-gear.png

gitlab.com/…/images/logo-gear.png

Size [width x height]: 96px * 96px

3: Long

Stuffed with Items

Consider populate the navigation bar with more menu and stuff. The item is self explanatory.

tutor-02/23-navbar-long.html

gitlab.com/…/23-navbar-long.html.

<body>

  <!-- header -->
  <nav role="navigation" aria-label="main navigation"
       class="navbar is-fixed-top is-dark">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img src="images/logo-gear.png" alt="Home" />
      </a>
      <a class="navbar-item">
        Blog
      </a>
    </div>

    <div id="navbarBulma" class="navbar-menu">
      <div class="navbar-start">
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            Archives
          </a>

          <div class="navbar-dropdown">
            <a class="navbar-item">
              By Tags
            </a>
            <a class="navbar-item">
              By Category
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item">
              By Date
            </a>
          </div>
        </div>

        <a class="navbar-item">
          About
        </a>
      </div>

      <div class="navbar-end">
        <form class="is-marginless" action="/pages/search/" method="get">
        <div class="navbar-item">
          <input class="" type="text" name="q"
            placeholder="Search..." aria-label="Search">
          &nbsp;
          <button class="button is-light" 
            type="submit">Search</button>
        </div>
        </form>
      </div>

    </div>
  </nav>

</body>

You can see the respective result as below figure.

Bulma Navigation Bar: Long Stuffed

Notice that The original screenshot took longer window. I changed the sass a bit to make the screenshot fit with 640px;.

Just like bootstrap, Bulma also has the dropdown menu.

    <div id="navbarBulma" class="navbar-menu">
      <div class="navbar-start">
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            Archives
          </a>

          <div class="navbar-dropdown">
            <a class="navbar-item">
              By Tags
            </a>
            <a class="navbar-item">
              By Category
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item">
              By Date
            </a>
          </div>
        </div>

        <a class="navbar-item">
          About
        </a>
      </div>
    </div>

Responsive

Consider have a look at the result in 480x screen.

Bulma Navigation Bar: Responsive

Notice that the Blog link will always be shown. If you want to hide, you can put this link in navbar-menu.

4: jQuery

Bulma does not come with any javascript. Or you say Bulma is javascript agnostic. In order for the burger button to works, we need javascript however.

tutor-02/24-navbar-jquery.html

gitlab.com/…/24-navbar-jquery.html.

Prepare

Consider jQuery in the <head> element.

<head>
    ...

    <link rel="stylesheet" type="text/css" href="css/bulma.css">
    <script src="js/jquery-slim.min.js"></script>
    <script src="js/bulma-burger-jquery.js"></script>
</head>

Burger Javascript

The Javascript will examine respected DOM.

tutor-02/js/bulma-burger-jquery.js

gitlab.com/…/bulma-burger-jquery.js.

$(document).ready(function() {

  // Check for click events on the navbar burger icon
  $(".navbar-burger").click(function() {

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");

  });
});

Burger Button

Add burger button in the <body> element.

<body>

  <!-- header -->
  <nav role="navigation" aria-label="main navigation"
       class="navbar is-fixed-top is-dark">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img src="images/logo-gear.png" alt="Home" />
      </a>
      <a class="navbar-item">
        Blog
      </a>

      <a role="button" class="navbar-burger burger"
         aria-label="menu" aria-expanded="false" data-target="navbarBulma">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbarBulma" class="navbar-menu">
    ...
    </div>
  </nav>

</body>

Responsive

Consider have a look at the result in 480x screen.

Bulma Navigation Bar: Burger Button

And the expected result of clicked will be:

Bulma Navigation Bar: jQuery Dropdown Menu

5: Vue

The decade of jQuery has been left in the past. Now we have a some better javascript framework as an option.

tutor-02/25-navbar-vue.html

gitlab.com/…/25-navbar-vue.html.

Prepare

Consider Vue in the <head> element.

<head>
    ...

    <script src="js/vue.min.js"></script>
</head>

And load in the end of <body> element.

  ...

  <!-- JavaScript -->
  <!-- Placed at the end of the document -->
  <script src="js/bulma-burger-vue.js"></script>
</body>
</html>

Burger Javascript

The Javascript will examine the #navbar-vue-app element.

tutor-02/js/bulma-burger-vue.js

gitlab.com/…/bulma-burger-vue.js.

new Vue({
  el: '#navbar-vue-app',
  data: {
    isOpen: false
  }
});

I got the script from

belowthebenthic.com/bulma-burger

Burger Button

The burger button in the <nav> element is a little bit different.

      <a role="button" class="navbar-burger burger" 
         aria-label="menu" aria-expanded="false" data-target="navbarBulma"
         @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>

The navigation menu in the <nav> element is also little bit different.

    <div id="navbarBulma" class="navbar-menu"
         v-bind:class="{'is-active': isOpen}">
      <div class="navbar-start">
        ...
      </div>
      <div class="navbar-end">
        ...
      </div>
    </div>

Responsive

The expected result of clicked button burger is similar.

Bulma Navigation Bar: Vue Dropdown Menu

6: Plain

If you want your page to be lightweight, without any javascript framework, you can use plain javascript.

tutor-02/26-navbar-plain.html

gitlab.com/…/26-navbar-plain.html.

Prepare

Consider js/bulma-burger-plain.js in the <head> element. This is a custom tailor made, plain vanilla javascript, to handle burger menu.

<head>
  ...

  <link rel="stylesheet" type="text/css" href="css/bulma.css">
  <script src="js/bulma-burger-plain.js"></script>
</head>

Burger Javascript

The Javascript will examine respected DOM.

tutor-02/js/bulma-burger-plain.js

gitlab.com/…/bulma-burger-plain.js.

document.addEventListener("DOMContentLoaded", function(event) { 
  // Check for click events on the navbar burger icon
  var navbarBurgers = document.getElementsByClassName("navbar-burger");
  var navbarMenus   = document.getElementsByClassName("navbar-menu");
  
  navbarBurgers[0].onclick = function() {
    navbarBurgers[0].classList.toggle("is-active");
    navbarMenus[0].classList.toggle("is-active");
    console.log('Toggle is-active class in navbar burger menu');
  } 
});

Or even alternatively:

document.addEventListener("DOMContentLoaded", function(event) { 
  // Check for click events on the navbar burger icon
  const navbarBurger = document.getElementsByClassName("navbar-burger")[0];
  const navbarBulma  = document.getElementById("navbarBulma");

  // Toggle if navbar menu is open or closed
  function toggleMenu() {
    navbarBurger.classList.toggle("is-active");
    navbarBulma.classList.toggle("is-active");
    console.log('Toggle is-active class in navbar burger menu');
  }

  // Event listeners
  navbarBurger.addEventListener('click', toggleMenu, false);
});

Burger Button

The same document structure with jquery.

7: FontAwesome

Bulma also does not come with any font icon. It takes manual setup.

tutor-02/27-navbar-awesome.html

gitlab.com/…/27-navbar-awesome.html.

Prepare

Consider FontAwesome as CDN in the <head> element.

    <link rel="stylesheet" type="text/css" href="css/bulma.css">
    <link rel="stylesheet" 
          href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
          integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
          crossorigin="anonymous">

Example

Consider this dropdown menu as example

        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            Archives
          </a>

          <div class="navbar-dropdown">
            <a class="navbar-item">
              <span class="fa fa-tags"></span>&nbsp;By Tags
            </a>
            <a class="navbar-item">
              <span class="fa fa-folder"></span>&nbsp;By Category
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item">
              <span class="fa fa-calendar"></span>&nbsp;By Date
            </a>
          </div>
        </div>

And the expected result will be:

Bulma Navigation Bar: FontAwesome in Dropdown Menu

What is Next ?

I think that is all, about Navigation Bar in Bulma.

There is, an introduction about SASS in Bulma. Consider continue reading [ Bulma SASS - Introduction ].

Thank you for reading.

Bulma - Navigation Bar

Preface

1: Minimal

Directory Preparation

2: Simple

Skeleton

Assets: Logo

3: Long

Dropdown Menu

Responsive

4: jQuery

Prepare

Burger Javascript

Burger Button

Responsive

5: Vue

Prepare

Burger Javascript

Burger Button

Navigation Menu

Responsive

6: Plain

Prepare

Burger Javascript

Burger Button

7: FontAwesome

Prepare

Example

What is Next ?