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.
[html]<!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="<script>" title="<script>" />
</head>
<body>
</body>
</html>[/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.
[html]
<nav class="navbar is-primary">
<div class="container">
</div>
</nav>
[/html]
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.
[html]
<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>
[/html]
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.
[html]
<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>
[/html]
And putting the whole menu together will give you the following.
[html]
<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>
[/html]
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.
[js]
(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’);
});
})();
[/js]
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.
How do I change the background color of the drop-down? For example, the web nav bar is green with white text that turns blue on hover. However, when I go mobile the dropdown background is also white making it impossible to read. Ideas?
Thanks for sharing.
Is there an easy way to put text to the right or left of the hamburger icon?
Imagine this is hamburger icon: [=]
Here is how I want it to look like: MENU [=]
This is awesome thanks. Agree documentation on bulma is weak. This really helps out.
Thanks for the explanation. Would you be so kind to extend the example with a menu having submenu’s?
This is what I’m looking for too, UB.
Adam has an amazingly beautiful website here, doesn’t he? I’m enjoying brushing up on my PHP and HTML and CSS and everything else. (JavaScript,) and I am not exactly sure how the two menu displays I want will look. On Desktop, the primary menu elements open a dropdown on hover, while submenus would fly out. And on Mobile, I’m not sure what’s most elegant to do there.
My ongoing work can be seen here: (it’s quite a mess) http://mitchpowell.com/learninglabs/
The mock-up I made, not sure about things, is here:
http://mitchpowell.com/learninglabs/navbar-want.jpg
I’m missing some javascript, and I’m only just learning the class names for navbar sections.
I just need some pieces of code I can work with to be able to show off my labs as I accomplish them.
Thanks Adam and UB.