How to Build a Nav Menu with Burger Menu Button

#webdev #react #tutorial #css

Welcome Back!

Where we left off - GitHub

What we're doing today:

Creating a Navigation Menu

Where am I?

I did a bit more work from where we last left off, I consolidated the component styling within the Body.css file. I have completed the content for the site. Everything but state management, a contact form, and the menu are completed.

So lets start on the menu. From the design you can see the wireframe design of the menu:

From the component tree we can also identify that it doesn't belong inside the Body component so we will implement it outside and import it directly into the App component.

function App() {
  return (
    <>
      <Menu />
      <Body />
    </>
  );
}

Now we need to look at the actual design of the menu and note down the key aspects of it:

As we can see there is a dark background, a rounded corner, and a 1px border. We'll implement that with this css:

.menu {
  position: absolute;
  background: rgba(0, 6, 37, .2);
  min-width: 64px;
  width: 20%;
  max-width: 16rem;
  height: 30rem;
  border-radius: 0 0 25px 0;
  border-right: 1px solid #004762;
  border-bottom: 1px solid #004762;
}

Now we can create two more components called Navigation and Socials, and directly import them into the Menu component.

For the Navigation implementation I simply created a <nav> element around 4 <h3> elements. For the CSS I had to remember there will be a close button in the top left of the menu so I implement a :first-child selector:

nav {
  margin-left: 1rem;
}

nav>h3:first-child {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

nav > h3 {
  margin-top: 0.25em;
  margin-bottom: 1rem;
}

We're now left with:

The next part of the puzzle is creating the close button which is part of a Burger Menu component. We'll be using an outside library for ease called hamburger-react.

First we'll import it and then we'll add it to the Menu component.

import { Divide as Hamburger } from 'hamburger-react'

import Navigation from './Navigation'
import Socials from './Socials'

function Menu() {
  return (
    <div className="menu">
      <Hamburger
        size={20}
        color='#004762'
        rounded
      />
      <Navigation />
      <Socials />
    </div>
  )
}

With this all done all that is left is to add the socials and then we can start using state within the app to piece all the currently static components together.

GitHub

To view where we're at you can follow this link to the final commit at the end of each post to follow along!

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started