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.
Directory Preparation
Now consider create directory for respective assets:
-
css
-
js
-
images
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:
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">
<button class="button is-light"
type="submit">Search</button>
</div>
</form>
</div>
</div>
</nav>
</body>
You can see the respective result as below figure.
Notice that The original screenshot took longer window.
I changed the sass a bit to make the screenshot fit with 640px;
.
Dropdown Menu
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.
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.
And the expected result of clicked will be:
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
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>
Navigation Menu
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.
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> By Tags
</a>
<a class="navbar-item">
<span class="fa fa-folder"></span> By Category
</a>
<hr class="navbar-divider">
<a class="navbar-item">
<span class="fa fa-calendar"></span> By Date
</a>
</div>
</div>
And the expected result will be:
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.