DEV Community

Sam Preston
Sam Preston

Posted on

How to Build a Nav Menu with Burger Menu Button

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:

Menu Framework

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 />
Enter fullscreen mode Exit fullscreen mode

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

Menu Design

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

We're now left with:
Nav Done

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">
      <Navigation />
      <Socials />
Enter fullscreen mode Exit fullscreen mode

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.


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

Top comments (0)