How to Create a Responsive Navbar Using ReactJS

👉 Live Demo - LIVE demo
👉 Website Link - source code

In this tutorial, I'll explain how to use ReactJS to create a responsive Navbar. which you can utilise for your undertaking.
To address the following issue, create a navigation bar using reactJS. This demonstrates how to use Reacts to construct a responsive menu bar.

The modules Required are :

npm
create-react-app
You need to install a node on your local system in order to create this navigation bar since we download and utilise some node module packages.

After installing the node just check your node version by putting this command in your terminal

node -v

If you don’t please install the latest version.

All things are done you are ready to make a project using create-react-app so open your terminal and type :

npx create-react-app my-app

Now enter the following command into the terminal to access your navigation-bar folder:

cd my-app

I trust you have created the framework successfully up to this point. Let's start writing and creating our react js responsive navbar. Simply adhere to the instructions to create a responsive navigation bar using ReactJS.

👉Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
); 

👉 Index.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --primary:#3F86F8;
  --background:#f5f811;
}

.primary {
  color: var(--primary);
}

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul{
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #333;
}

.container {
  max-width: 1240px;
  margin: auto;
}

h1 {
  font-size: 3.5rem;
  line-height: 1.2;
}

h2 {
  font-size: 2.4rem;
  line-height: 1.2;
}

h5{
  font-size: 1.1rem;
  line-height: 1.2;
}

p{
  font-size: 1.2rem;
}

.btn {
  padding: 14px 32px;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: white;
  border-radius: 10px ;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  box-shadow:rgb(000/15%)0px 8px 24px;
}


input {
  padding:12px 32px;
  border: 1px solid var(--primary);
  background: transparent;
  border-radius: 24px 4px;
  font-size: 1rem;
  margin-right: .8rem;
  font-family: 'Poppins',sans-serif;

}


@media screen and (max-width:768px) {


h1 {
  font-size: 2.1rem;
  line-height: 1.2;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.2;
}

h5{
  font-size: 1.1rem;
  line-height: 1.2;
}

p{
  font-size: 1rem;
}

.btn{
  width: 100%;
  margin: 1rem 0;
}

input {
  width: 100%;
}

}



body {
  margin: 0;
  font-family: 'Poppins', sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Utilizing the command, save all files and launch the server.

👉 App.js

import React, {useState} from 'react'
import {FaBars, FaTimes} from 'react-icons/fa'
import './Navbar.css'

const Navbar = () => {
const [click, setClick] = useState(false)
const handleClick = () => setClick(!click)


    return (
        <div className='header'>
            <div className='container'>
                <h1 className='logo' >Logo</h1>
                <ul className={click ? 'nav-menu active' : 'nav-menu'}>
                    <li>
                        <a href='/'>Home</a>
                    </li>
                    <li>
                        <a href='/'>Featured</a>
                    </li>
                    <li>
                        <a href='/'>Earn</a>
                    </li>
                    <li>
                        <a href='/'>Contact</a>
                    </li>
                </ul>
                <div className='btn-group'>
                    <button className='btn'>Connect Wallet</button>
                </div>
                <div className='hamburger' onClick={handleClick}>
                    {click ? (<FaTimes size={20} style={{color: '#333'}}/>) : (<FaBars size={20} style={{color: '#333'}} />)}

                </div>
            </div>
        </div>
    )
}

export default Navbar

👉 App.css

.header {
    width: 100%;
    height: 90px;
    border-bottom: 1px solid #eee;
    /* background: #fff; */
    background: #000000;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 1rem;
}

.colors {
    color: var(--primary);
}

.nav-menu {
    display: flex;
}
.logo
{
  color: #FFE600;
   font-Size: 28px;
}

.nav-menu li {
    padding: 0 1rem;
}

.nav-menu a {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(255, 255, 255);
}

.hamburger {
    display: none;
    cursor: pointer;
}


@media screen and (max-width:1240px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: absolute;
        flex-direction: column;
        justify-content: start;
        top: 90px;
        right: -100%;
        width: 50%;
        height: 100vh;
        transition: 0.4s;
        z-index: 2;
        background: rgb(0, 0, 0);
        border-left: 1px solid #eee;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu li {
        padding: 1rem;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .nav-menu a {
        font-size: 1.2rem;
    }
}

Conclusion

It worked! We sincerely hope you like our tutorial on how to use ReactJS to create a responsive navigation bar. Find comparable projects at ziontutorial.com, and let me know in the comments which one I should address next.

Check out this BMI calculator built with React and Hooks. Leave a comment if you have any queries. In the area provided, kindly write a comment on this project. You may also ask any queries in our Telegram channel, which is mostly available there.