How to create a responsive hamburger navigation menu — ReactJS and Styled Components

In order to build a website with a good user experience, there are a lot of things to consider and one of them is how responsive your site is going to be. Your site can be responsive and still have a bad user experience. But how do you solve this?

Originally published my blog here here

In this article, I am going to walk you through building a hamburger responsive navigation menu from scratch using Reactjs and Styled-Components. To do this, there are a few things to handle.

Setup React app

In your terminal, run the following scripts. Then open http://localhost:3000 to see your app.

npx create-react-app responsive-nabar
cd responsive-nabar
npm start

While your app is running, install styled components using the following scripts.

npm install styled-components

Go to your root directory and clear out the create react app files we won't be needing. Your directory structure should look exactly like this

File structure for responsive-navbar

Open your index.html and add the following code directly below the <title> tag.

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
</style>

Update your App.js file with the following code

Your RightNav.jsx, Burger.jsx, and Navbar.jsx files should have the respective codes below

After this, your app should look as shown below with no styling yet.

Apply styles to components

Given that we already install styled-components, our RightNav.jsx, Burger.jsx, and Navbar.jsx components will finally look as follows.

You can now check your app on the browser and it should look like this

Conclusion

Finally, you should have a responsive navigation menu with some nice hamburger animations when clicked. In case you face any problems, you can reference the repository on GitHub

Thanks