responsive bulma.io navbar

So you want a responsive nav bar? Well you've come to the right place!

A nav bar is one of the most commonly used features of any website, so it's a good idea to know how to build one or at least have a go to resource. In this tutorial I will show you how to build a responsive navbar using the bulma.io library.

step 1

Import the link to the bulma stylesheet into the head of your document.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

step 2

Build the inital structure of your navbar.

<!-- step 1.1 -->
<nav class="navbar" id="my-nav" role="navigation"> 
    <!-- step 1.2 -->
    <div class="navbar-menu">
        <!-- step 1.3 -->
        <div class="navbar-start">
            <!-- step 1.4 -->
            <a class="navbar-item">navbaritem</a>
            <a class="navbar-item">navbaritem</a>
            <a class="navbar-item">navbaritem</a>
            <!-- step 1.5 -->
            <div class="navbar-item has-dropdown is-hoverable">
                <!-- step 1.6 -->
                <p class="navbar-link">more</p>
                <!-- step 1.7 -->
                <div class="navbar-dropdown">
                    <a class="navbar-item">navbaritem</a>
                    <a class="navbar-item">navbaritem</a>
                </div>
            </div>
        </div>
    </div>
</nav>

A brief explanation of what is happening above:

1. The nav element with the class of navbar(provided by bulma) creates the navbar container where we will store the rest of our elements
2. The div wit the bulma class of navbar-menu will give us some of the responsiveness so when this window shrinks to a certian size, the navbar disappears
3. The div with the bulma class of navbar-start will allign our navbar-items by creating a flex box for us
4. you can put a number of different elements here, most relevent to me though is putting React Router Link tags. The navbar-item bulma class adds a onMouseOver effect which imporves the ux
5. The following steps are optional but if you want to add a dropdown menu into your navbar, this is a way that you could do it. There are two new bulma classes applied to this div, the first being the has-dropdown which on its own does nothing but when paired with the step 7 it will give us a working drop down. The second is the is-hoverable class which makes the div we created highlight when the mouse is above it
6. The p tag with the class navbar-link creates a chevron and adds text to differentiate that this is a dropdown manu and not a navbar item
7. The div with the navbar-dropdown bulma class will hide the navbar items that are contained within it

Now that we have a desktop friendly navbar now lets make it mobile friendly!

step 3

now we are going to add another chunk of html to our nav element.
If you are building the app in HTML your code should look like this:

<a role="button" id="burger" class="navbar-burger">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
</a>

The class above 'navbar-burger' creates the navbar and the three spans are required to display the three lines in the hamburger

Now if we got into our browser and shrink the window we should see the navbar items disappear and see the burger reappear on the right, cool! WAIT when we click the button nothing happens!!

step 4

If you are building a in react app skip to step 4.5
This step will consist of the javascript logic required to toggle the view of the hamburger menu above and link it to the HTML file we are in.

A brief explanation of the following code: First we are searching for the elements in our HTML with the tags of my-nav and burger and saving them to variables, after that we need the menu to appear when the user clicks so we add an event listener that listens for a click event and then executes a callback function that comes after the comma. Inside said callback function we need to add a class to both the my-nav and the burger elements, more specifically toggle between the two so we grab a list of the classes in the document and add the toggle method with the class we need to toggle between which is in this case is-active. The toggle method in JS searches for the presence of a given argument and if the argument is present it removes it and if it is not, it adds it.

const myNav = document.querySelector("#my-nav")
const burger = document.querySelector("#burger")
burger.addEventListener('click', ()=> {
    myNav.classList.toggle("is-active")
    burger.classList.toggle("is-active")
})

step 4.5 - react burger

if you are following along in react add this to the a element:

onClick={toggleDropdown}

now we are going to declare that function and put some logic in it, insert the following code into your NavBar component

function toggleDropdown() {
    const myNav = document.querySelector("#my-nav")
    const burger = document.querySelector("#burger")
    myNav.classList.toggle("is-active")
    burger.classList.toggle("is-active")
}

The the snippets of code above perform the same logic as explained in step 4 and with that you should have a functioning responsive nav bar!