Simple Responsive Menu in React JS in 2020

So, to create a simple responsive menu using React JS. we will use the package called React Router Dom and we can easily install it or add it to our React app using npm, yarn, etc.

And we can do it here is the video please check it first.

And here is the source code on How to create a simple responsive menu using React JS.

Step 1: First, we will create an Index.js page

import React from "react";

import ReactDOM from "react-dom";

import App from "./App";

import "./index.css";

import Navbar from './Navbar'

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(

  <>

    <BrowserRouter>

      <App />

    </BrowserRouter>

  </>,

  document.getElementById("root")

);

Step 2: Create a App.jsx component

import React from "react";

import Home from "./Home";

import Contact from "./Contact";

import About from "./About";

import { Switch, Route } from "react-router-dom";

import Navbar from "./Navbar";

const App = () => {

  return (

    <>

      <Navbar />

      <Switch>

        <Route exact path="/" component={Home} />

        <Route path="/about" component={About} />

        <Route path="/contact" component={Contact} />

      </Switch>

    </>

  );

};

export default App;

Step 3: Create a Home.jsx component

import React from "react";

const Home = () => {

  return (

    <>

      <div className="setStyle">

        <h1> Home Page </h1>

        <p> Welcome to my world </p>

      </div>

    </>

  );

};

export default Home;

Step 4: Create a Contact.jsx component

import React from "react";

const Contact = () => {

  return (

    <>

      <div className="setStyle2">

        <h1> Contact Page </h1>

        <p> Welcome to my world </p>

      </div>

    </>

  );

};

export default Contact;

Step 5: Create an About.jsx component

import React from "react";

const About = () => {

  return (

    <>

      <div className="setStyle3">

        <h1> About Page </h1>

        <p> Welcome to my world </p>

      </div>

    </>

  );

};

export default About;

Step 6: Create an inde.css page

@import url("https://fonts.googleapis.com/css2?family=Cuprum&display=swap");

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Cuprum", sans-serif;

}

.setStyle {

  background-color: #99b898;

  color: #feceab;

  height: 90vh;

  font-size: 8rem;

  text-align: center;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-shadow: 1px 2px 3px firebrick;

}

.setStyle2 {

  height: 90vh;

  font-size: 8rem;

  text-align: center;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-shadow: 1px 2px 3px #01a9b4;

  background-color: #01a9b4;

  color: #086972;

}

.setStyle3 {

  height: 90vh;

  font-size: 8rem;

  text-align: center;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-shadow: 1px 2px 3px #e5cfe5;

  background-color: #3b6978;

  color: #a6dcef;

}

.mainMenu {

  width: 100%;

  line-height: 10vh;

  display: flex;

  justify-content: space-around;

  align-items: center;

  background-color: #e84a5f;

  color: #ff847c;

}

.mainMenu a {

  color: #092532;

  font-size: 3rem;

}

a.menu_link {

  color: #feceab;

  font-size: 3rem;

}

@media (max-width: 768px) {

  .setStyle,

  .setStyle2,

  .setStyle3 {

    height: 80vh;

  }

  .setStyle h1,

  .setStyle2 h1,

  .setStyle3 h1 {

    font-size: 5rem;

  }

  .setStyle p,

  .setStyle2 p,

  .setStyle3 p {

    font-size: 3rem;

  }

  .mainMenu {

    display: block;

    line-height: rem;

  }

  .mainMenu a {

    display: block;

    text-align: center;

  }

  .mainMenu a {

    font-size: 2rem;

    border-bottom: 2px solid black;

  }

}