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 the video below. First of all, create your react app using: npx create-react-app HamburgerMenu Install styled-components dependency: 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. 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. React,{useState} ; ; styled ; MenuLabel = styled.label ; { ( <MenuLabel htmlFor="navi-toggle">
        Menu
      </MenuLabel> import from "react" import "./styles.css" import from "styled-components" const `
  background-color: #B6EDC8;
  position: fixed;
  top: 6rem;
  right: 6rem;
  border-radius: 50%;
  height: 7rem;
  width: 7rem;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 1rem 3rem rgba(182, 237, 200, 0.3);
  text-align: center;
` export default ( ) function App return <> );
} </> 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: 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" &nbsp; < > Icon </ > Icon /MenuLabel> Let's write CSS for this Icon component, which will be an span element. Icon = styled.span ; const `
  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 these 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 React,{useState} ; ; styled ; MenuLabel = styled.label ; Icon = styled.span ; { [click, setClick] = useState( ); handleClick = setClick(!click); ( <MenuLabel htmlFor="navi-toggle" onClick={handleClick}>
                <Icon clicked={click}>&nbsp;</Icon>
        </MenuLabel> import from "react" import "./styles.css" import from "styled-components" const `
  background-color: #B6EDC8;
  position: fixed;
  top: 6rem;
  right: 6rem;
  border-radius: 50%;
  height: 7rem;
  width: 7rem;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 1rem 3rem rgba(182, 237, 200, 0.3);
  text-align: center;
` const `
  position: relative;
  background-color: ;
  width: 3rem;
  height: 2px;
  display: inline-block;
  margin-top: 3.5rem;
  transition: all 0.3s;
  &::before,
  &::after {
    content: "";
    background-color: black;
    width: 3rem;
    height: 2px;
    display: inline-block;
    position: absolute;
    left: 0;
    transition: all 0.3s;
  }
  &::before {
    top: ;
    transform: ;
  }
  &::after {
    top: ;
    transform: ;
  }
` ${(props) => (props.clicked ? : )} "transparent" "black" ${(props) => (props.clicked ? : )} "0" "-0.8rem" ${(props) => (props.clicked ? : )} "rotate(135deg)" "rotate(0)" ${(props) => (props.clicked ? : )} "0" "0.8rem" ${(props) => (props.clicked ? : )} "rotate(-135deg)" "rotate(0)" export default ( ) function App const false const => () return <> );
} </> As you can see in the above code, before return statement we have created one click state and handleClick method which will change the state. In MenuLabel set onClick to handleClick method to change click state. In the Icon pass state click as props clicked.(You can change prop name clicked to anything you like) In styling Icon background-color use this props and put ternary condition like if is true then background will be else it will be by doing this we’re removing the middle line. To remove it smoothly add transition effect. props.clicked transparent black → Now in and Set top to **”0"** when someone clicks on icon so that both of those lines came little bit down to form X. &::before &::after At property 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. transform Put transition in and so that both of this lines create smooth animation. &::before &::after block Now if you want hover effect then we can do it as below: ${MenuLabel}:hover &::before { : ${(props) => (props.clicked ? “ ” : “ rem”)};
}
${MenuLabel}:hover &::after { : ${(props) => (props.clicked ? “ ” : “ rem”)};
} top 0 -1 top 0 1 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: Thanks For Reading! 😉 Also published on: https://dev.to/codebucks/build-hamburger-menu-in-reactjs-using-styled-components-25ln

ReactJS Pagination Tutorial: Building from Scratch

Checkout my new website🤩

Portfolio

Hire Me

How to Build a Hamburger Menu in ReactJS via Styled-Components

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Tutorial for Todo Apps using React, Redux and Framer-Motion

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

A Tutorial for Todo Apps using React, Redux and Framer-Motion

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps