Build Hamburger Menu in ReactJS using Styled-Components
Tags: react, css, webdev, javascript
Published: 2021-01-01 14:41:20

Hi there,

In this post I'm going to share simple method to create Hamburger Menu in ReactJS. Using this method you can create any type of Hamburger Menu you want.

If you want to see whole Tutorial of creating Hamburger Menu with all the functionalities like React-Router with awesome radical gradient background effect then you can follow below Tutorial else keep continue reading...

{% youtube XQCuew98W4k %}

First of all create your react app using,

`npx create-react-app HamburgerMenu`

Install styled-components dependancy,

`npm install styled-components`

Now if you want to create different file for your Hamburger Menu then you can, here I'm writing everything in the app.js file for this tutorial.

First of all we will start by importing styled components.

`import styled from "styled-components";
`
Let's create one fixed rounded menu first. Name it as MenuLabel and create it using styled-components.

{% gist https://gist.github.com/codebucks27/4d1c82332b2a04ab79d2dcb59defdb7c/1c1d52cb2085e0269ca22eb92c1958dc75e5fbe1  %}



In the above code we have created on rounded Menu using styled-component at line no 6 which is label tag in html.

Output of this will look something like this,

![Menu Label Output](https://dev-to-uploads.s3.amazonaws.com/i/1ux7cgvy2zeh7r37vga7.png)

**Now we will create icon above this menu.**

Remove Menu written inside of MenuLabel.

and create new component Icon as below,

```
<MenuLabel htmlFor="navi-toggle">
   <Icon>&nbsp;</Icon>
</MenuLabel>
```

Let's write css for this Icon component, which will be an span element.

```
const Icon = styled.span`
  position: relative;
  background-color: black;
  width: 3rem;
  height: 2px;
  display: inline-block;
  margin-top: 3.5rem;

  &::before,
  &::after {
    content: "";
    background-color: black;
    width: 3rem;
    height: 2px;
    display: inline-block;
    position: absolute;
    left: 0;
  }
  &::before {
    top: -0.8rem;
  }
  &::after {
    top: 0.8rem;
  }
`;
```

By only using width and height properties properly we can create simple horizontal lines. 

we have copied our main line through before and after pseudo classes, and displayed one above the original and one below.

You can set separate width and height for all these three lines.

Now what we need is to create X with this 3 lines whenever someone clicks on it and to do that we have to,

* create state and handleClick method for setting state
* Pass this state as props in Icon component
* Use this props inside the styled-components that we have created
* Hide the middle line
* use transform and rotate for other two lines

{% gist https://gist.github.com/codebucks27/4d1c82332b2a04ab79d2dcb59defdb7c/44a0594ecea32c778c6ac993c9a4569a1fb3af10 %}

As you can see in the above code;

*line 53 and 54:* we have created one click state and handleClick method which will change the state.

*line 58:* set onClick to handleClick method to change click 
           state.

*line 59:* pass state click as props clicked.(You can change prop 
           name clicked to anything you like)

*line 22:* use this props and put ternary condition like if 
           **props.clicked** is true then background will be 
           **transparent** else it will be **black** ---> by doing 
           this we're removing the middle line. To remove it 
           smoothly add transition effect as in **line no 27** 

*line 41 and 45:* Set top to **"0"** when someone clicks on icon 
                  so that both of those lines came little bit down 
                  to form X.

*line 42 and 46:* This is where we rotate both of this lines to 
                  form a Cross(X). If someone clicks it then state 
                  becomes true so it lines will rotate to 135deg. 
                  we can set low degree to make cross but by using 
                  135deg we can see more animation. 

*line 38:* Put transition so that both of this lines create smooth 
           animation.
 
Now if you want hover effect then we can do it as below,

```
${MenuLabel}:hover &::before {
  top: ${(props) => (props.clicked ? "0" : "-1rem")};
}
${MenuLabel}:hover &::after {
  top: ${(props) => (props.clicked ? "0" : "1rem")};
}
```
As show in the above code,
select MenuLabel then use :hover, which means whenever someone hovers on MenuLabel it affects before and after elements.

Before element will go little up while after will go little bit down. 

You can see Full Code here:

{% gist https://gist.github.com/codebucks27/4d1c82332b2a04ab79d2dcb59defdb7c %}

Feel free to visit my youtube channel: 
####[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)

Follow me on Twitter where I'm sharing lot's of useful resources!
####[@code.bucks](https://twitter.com/code_bucks) 😉

**Thanks For Reading! 😉**