Responsive NavBar Menu Using ReactJS

Create A Responsive NavBar Menu Using ReactJS

Responsive NavBar Menu Using ReactJS

In this tutorial, we’ll walk you through the process of creating a dynamic Responsive Navbar Menu component using ReactJS. The responsive Navbar Menu increases the user’s interactive towards the websites through different device platforms. ReactJS is a JavaScript Framework just like Angular and VueJS Frameworks but instead, it is a more popular one.

Preview OF NavBar Menu

Prerequisites

  • Basic Knowledge of HTML
  • Basic Knowledge of CSS
  • Basic Knowledge of JS including ReactJS Concepts.

Setting Up Your Environment

Before we can start coding our navbar, we need to set up our environment. We’ll use create-react-app .

To create a new application, open your terminal or command prompt and type:

npx create-react-app navbar-menu

This command will create a new folder named `navbar-menu`  with all the necessary files and dependencies for our React application.

File Structure

Before Start implementing the code. Create the necessary File Structure below:-

File Structure below

Creating a Navbar Component

About.jsx

import React from "react";

export const About = () => {
  return <h1>About</h1>;
};

Contact.jsx

import React from "react";

export const Contact = () => {
  return <h1>Contact</h1>;
};

Home.jsx

import React from "react";

export const Home = () => {
  return <h1>Home</h1>;
};

Services.jsx

import React from "react";

export const Services = () => {
  return (
    <>
      <h1>Services</h1>
      <div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem sunt
        itaque, perferendis necessitatibus corrupti ea magni voluptatibus est
        ipsa. Nulla praesentium dolore eos alias incidunt, odio et eaque, sunt
        vitae corporis animi, itaque architecto. Sunt minima nostrum fugiat
        quibusdam voluptate dolore illo cupiditate quam odio sequi. Consequatur
        tempora ullam, ipsam molestias dolor dolores tempore. Molestias, error
        porro tenetur delectus numquam animi aut quod consequuntur? Dolor sequi
        quisquam ex, eaque explicabo, labore maxime veniam voluptas enim
        recusandae architecto est voluptates optio libero officiis consectetur
        possimus voluptate ipsam alias velit veritatis reprehenderit
        repudiandae. Ullam praesentium inventore minima eius dolorem omnis fugit
        facilis.
      </div>
      <br />
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
        libero laboriosam quia totam, ducimus dolorum velit voluptates ipsam ad
        labore repellendus! Reprehenderit corporis labore totam est quas natus
        non quis? Atque porro obcaecati error hic perspiciatis itaque
        reprehenderit ut aperiam, ipsa, repellendus voluptatum, architecto sint
        delectus. 
      </div>
      <br />
      <div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a,
        expedita quaerat, facere iste earum deserunt numquam dignissimos
        obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus
        facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui
        alias. Ut inventore commodi quae ea excepturi,
      </div>
      <br />
      <div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a,
        expedita quaerat, facere iste earum deserunt numquam dignissimos
        obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus
        facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui
        alias. Ut inventore commodi quae ea excepturi, soluta distinctio
        laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat
        consequatur assumenda, unde atque nemo modi perferendis?
      </div>
      <br />
      <div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a,
        expedita quaerat, facere iste earum deserunt numquam dignissimos
        obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus
        facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui
        alias. Ut inventore commodi quae ea excepturi, soluta distinctio
        laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat
        consequatur assumenda, unde atque nemo modi perferendis? Saepe
        molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas
        qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque
        culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a,
        quod blanditiis dolores odit aliquid quis distinctio.
      </div>
      <br />
      <div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a,
        expedita quaerat, facere iste earum deserunt numquam dignissimos
        obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus
        facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui
        alias. Ut inventore commodi quae ea excepturi, soluta distinctio
        laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat
        consequatur assumenda, unde atque nemo modi perferendis? Saepe
        molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas
        qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque
        culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a,
        quod blanditiis dolores odit aliquid quis distinctio.
      </div>
      <br />
      <div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a,
        expedita quaerat, facere iste earum deserunt numquam dignissimos
        obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus
        facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui
        alias.
      </div>
    </>
  );
};

index.jsx

export * from "./About";
export * from "./Contact";
export * from "./Home";
export * from "./Services";

Navbar.js

In this component, we’ve used the NavLink tag to make the routing to the other pages of the websites.

import React, { useState } from "react";

import "./Navbar.css";
import { Link, NavLink } from "react-router-dom";

export const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <nav>
      <Link to="/" className="title">
        Website
      </Link>
      <div className="menu" onClick={() => setMenuOpen(!menuOpen)}>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <ul className={menuOpen ? "open" : ""}>
        <li>
          <NavLink to="/about">About</NavLink>
        </li>
        <li>
          <NavLink to="/services">Services</NavLink>
        </li>
        <li>
          <NavLink to="/contact">Contact</NavLink>
        </li>
      </ul>
    </nav>
  );
};

Styling Our Navbar Menu

App.css

.App {
  background-color: #fefefe;
  height: 100vh;
  width: 100%;
}

index.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

NavBar.css

.active{
    background-color: #1d4ed8;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0f172a;
    color: white;
    position: sticky;
    top: 0;
}

nav .title {
    font-size: 1.5rem;
    margin: 1rem;
    font-weight: bold;
    text-decoration: none;
    color: white;
}

nav ul {
    display: flex;
}

nav ul li {
   list-style: none; 
}

nav ul li a {
    display: block;
    text-decoration: none;
    color: white;
    padding: 0.5rem;
    margin: 0 0.5rem;
    border-radius: 0.5rem;
}

nav ul li a:not(.active):hover {
    background-color:#172554 ;
}

nav .menu {
    display: none;
    position: absolute;
    top: 0.75rem;
    right: 0.5rem;
    flex-direction: column;
    justify-content: space-between;
    width: 2.25rem;
    height: 2rem;
}

nav .menu span {
    height: 0.4rem;
    width: 100%;
    background-color: #fff;
    border-radius: 0.2rem;
}


@media (max-width: 480px) {
    nav .menu {
        display: flex;
    }

    nav {
        flex-direction: column;
        align-items: flex-start;
    }

    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-bottom: 0.25rem;
    }

    nav ul.open {
        display: flex;
    }

    nav ul li {
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        margin: 0.2rem 0.5rem;
    }
}

Dependencies

The Package.json file will know the dependencies of your application. Every package you install for your application you’ll see the version here.

Your Package.json file should look like this:-

Package.json

{
  "name": "react-navbar",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.13.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.9"
  }
}

Preview Of Navbar Menu Using React.js

Create A Responsive NavBar Menu Using ReactJS

 

50+ Interesting React JS Project ideas With Source Code

Conclusion

Congratulations, You have completed your Mini Reactjs Project and further you can enhance this as per your preferences. You can deploy it on the Github, Vercel, or Netfliy platforms and make it live for your friends. Add this to your resume after adding or enhancing more functionality like a timer, stopwatch, profile, saving progress and many more. You can add further functionalities to your websites.

I hope you liked this Tutorial and must have learned Something new. If you have any questions regarding this feel free to drop your comments below and contact our team on Instagram @Codewithrandom.

Code Credit:- Code Complete

HAPPY CODING!!!



Tags:

Leave a Reply