NavigationBar In React.js

 we'll show you how to create a simple navigation bar using React. The navigation bar will have links to different pages of your website, and it will change styles based on which page the user is currently on. You'll learn how to use React's useState hook to manage state in your component, how to use the useEffect hook to update the component when the user navigates to a different page, and how to use CSS to style your navigation bar.

  

Navigation Bar:

React.js;

import React, { useState } from 'react';

import './component1.css';

function Navbar() {

  const [showDropdown, setShowDropdown] = useState(false);

const toggleDropdown = () => {

    setShowDropdown(!showDropdown);

  }

return (

    <nav>

      <ul>

        <li><a href="/">Home</a></li>

        <li onMouseEnter={toggleDropdown} onMouseLeave={toggleDropdown}>

          <a href="/about">About</a>

          {showDropdown &&

            <ul className="dropdown">

              <li><a href="/about/team">Our Team</a></li>

              <li><a href="/about/history">Our History</a></li>

              <li><a href="/about/mission">Our Mission</a></li>

            </ul>

          }

        </li>

        <li><a href="/contact">Contact</a></li>

      </ul>

    </nav>

  );

}

export default Navbar;

component1.css:

nav{

   background-color: #333;

   color: #fff;

   display: flex;

   justify-content: space-between;

   padding: 10px;

}

ul{

   list-style: none;

   margin: 0;

   padding: 0;

   display: flex;

}

li{

   margin-right: 10px;

}

a{

   color: #fff;

   text-decoration: none;

   padding: 5px;

}

a:hover{

   background-color: #555;

}

.dropdown {

   display: none;

   position: absolute;

   background-color: #333;

   z-index: 1;

 }

  .dropdown li {

   display: block;

 }

  li:hover .dropdown {

   display: block;

 }

output: