Creating a Hamburger Menu in React

This week I was given the opportunity to create a simple web page. I was given a sample image of the general idea of how the web page was going to look like. I also needed to make the web page responsive. One of biggest challenges for me when it comes to designing is how should the web page or any web page as a matter of fact, look like in mobile view?

The good thing however is, nowadays there are so many standards when it comes to responsive web pages. Such as the Hamburger menu! A Hamburger menu is a button on websites that typically opens up into a side menu or a navigation drawer. It was created by interaction designer Norm Cox for the Xerox Star personal workstation in 1981 as an easy way to communicate to users that the button contains a list of items.

So without further ado, let’s get started! If you’re like me, and dont have much experiences in designing and using CSS hopefully this tutorial will be simple enough for you to follow or use as a starting template

Creating our Nav

For this tutorial I’ll be creating a simple navigation and will be using style-jsx so it’s easier to read. I will also be using NextJs for my framework (don’t worry! NextJs uses React. If you’re not using NextJs there is nothing for you the change.)

First, let’s create a simple Nav Component.

Added background color for visibility in this case

Creating the Hamburger Component

Now that we have the simple Nav out the way, we can go ahead and create the hamburger menu! For this, we’re going to be creating a separate component.

We will not be importing any sort of icon for the burger, instead we’re going to use CSS to style our hamburger container!

Next step is to add our Hamburger component to our Nav component.

Awesome! Now, we have to fix this up using CSS. There are two things we need to adjust.

1. Hamburger should not appear unless it’s in mobile view.
2. The inline navigation needs to change in mobile view.

First, let’s make it so the Hamburger menu does not pop up unless it’s in mobile view.

Making the Hamburger menu pop up on mobile view.

To do this, we need to make sure the display for the hamburger is set to none. Next we add a media query for max-width. In my case, I set the max-width for 767px. Meaning as long as the width of the page is 767 or smaller the icon will appear.

Next, we need to make navigation links also disappear. However, in order for us to make sure it stays hidden and only appear when we click on the Hamburger icon, we’ll use React Hooks.

Under the Nav Component, we’re going to import a React Hook called useState. We’re going to be using a boolean state, and we’re going to create a function to toggle the state from true to false and vice versa.

Using style-jsx we can use our current state to decide what type of property we want for display.

Adding animation to the hamburger

Using the state in the Nav component, we can pass that into the Hamburger component. Whenever ‘hamburgerOpen’ is true, we can set the hamburger to look a certain way. In this example, we’re going to turn the hamburger into an X.

Nav component

Hamburger component

Learning how to create a Hamburger was really fun for me personally. If this guide is not clear enough, you can check the the demo repo here — https://github.com/aru120/hamburgerNav-demo. Feel free to use it for your personal projects!