Where to Discuss?

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.

<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.

<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

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.

Bulma Navigation Bar: Custom Logo

  • 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.

<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>

Bulma Navigation Bar: Dropdown Menu

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.

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.

$(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.

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.

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

I got the script from

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.

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.

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.

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.