Create a Responsive Navbar in React.js | Very easy and helpful Tutorial for Beginners

 

"Learn how to create a fully responsive navbar in React.js in this easy-to-follow tutorial for beginners! 🚀 We'll walk you through the step-by-step process of building a dynamic navigation bar that adapts to different screen sizes using React.js. Perfect for those just starting with React or looking to enhance their web development skills.

 

Code :

App.jsx

import React from 'react'

import { useState } from 'react'

const App = () => {

  const [active, setactive] = useState(false)

  return (

    <>

    <nav>

      <div className="logo">

        Always Code

      </div>

      <ul className={active ? 'active' : ''}>

        <li>Home</li>

        <li>About</li>

        <li>Services</li>

        <li>Contact</li>

      </ul>

      <div className="menus">

      <i onClick={()=>setactive(!active)} class="fa-solid fa-bars"></i>

      </div>

    </nav>

    </>

  )

}

export default App

 

 

 

index.css

*{

    margin: 0;

    padding: 0;

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

}

nav{

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 30px;

    background-color: #00ffaa;

}

nav ul{

    display: flex;

    align-items: center;

}

nav ul li{

    display: flex;

    list-style: none;

    color: #000;

    padding: 10px 20px;

    cursor: pointer;

}

.menus{

    font-size: 25px;

    display: none;

}

@media (max-width:750px) {

    nav ul{

        position: absolute;

        top: 40px;

        left: 0;

        right: 0;

        flex-direction: column;

        background-color: #00ffaa;

        transform: translateY(-1000px);

        transition: all .4s;

    }

    .menus{

        display: flex;

    }

    nav ul.active{

        transform: translateY(-0px);

    }

}

 

 

 

 

 Thank you so Much!!