React Navbar Dropdown Menu Responsive

How do I use it?

First, You will start a Create New React App project using create-react-app. It is creates and runs the following code snippet in the windows terminal command line.

npx create-react-app navigation-app 

cd navigation-app 

react-router-dom: use npm to install the package. so open your terminal and type.

npm install react-router-dom

Next, The npm package manager is install react-icons

npm install react-icons --save

Next, Project structure your folder as follows.

src
├── components
|  └── menu
|	  └── Navbarmenu.js
|     ├── Home.js
|     ├── About.js
|     ├── Online.js
|     ├── Offline.js
|     └── Contact.js
├── App.css
├── App.js
├── App.test.js
├── img
|  └── logo.png
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js 

The Router Component

In my example, we will create four components called Home, About, Shop, and Contact. So, let’s import the BrowserRouter, Route, and Switch component from the react-router-dom package

 App.js 
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
<Router basename="/">
	<Switch>
		<Route exact path="/" component={Home}/>
		<Route path="/About" component={About}/>
		<Route path="/Online" component={Online}/>
		<Route path="/Offline" component={Offline}/>
		<Route path="/Contact" component={Contact}/>
	</Switch>
</Router>

Add <Router> and <Switch> element(open and closing tags) in your App component. This router component will do the redirections. The switch is only one component is rendered at a time. otherwise, we can default to called the Error component.

Next, Add <Route> tags. Route tags should be placed inside the <Switch> tags. Maximum all websites home page URLs followed by “/”, for example, localhost:3000/ (or) www.codeat21.com/. In this case, a user types an incorrect URL called Error component(Page not found!).

 Navbarmenu.js 
import React from 'react';
import {NavLink} from 'react-router-dom';
function Navbarmenu() {
return(
		<header>
			<nav>
				<ul>
				  <li><NavLink to={`/`}> Home </NavLink> </li>
				  <li><NavLink to={`/About`}> About </NavLink> </li>
				  <li> Shop 
					  <ul>
						  <li><NavLink to={`/Online`}> Online </NavLink> </li>
						  <li><NavLink to={`/Offline`}> Offline </NavLink> </li>
					  </ul>
				  </li>
				  <li><NavLink to={`/Contact`}> Contact </NavLink> </li>
                </ul>
          </nav>    
		</header>
    );
}
export default Navbarmenu;

The <NavLink> component the same as the <Link> component. The <NavLink> component is used to create links to different routes. It works like HTML anchor tags.

  App.js 
import React from 'react';
import {BrowserRouter as Router,Switch,Route} from "react-router-dom";
import './App.css';
import Home from './components/Home';
import About from './components/About';
import Online from './components/Online';
import Offline from './components/Offline';
import Contact from './components/Contact';
import Navbarmenu from './components/menu/Navbarmenu';
function App() {
  return (
    <div>
      <Router basename="/">
       {/* Add Menu Component */}
        <Navbarmenu />
        <Switch> 
          <Route exact path="/" component={Home}/>
          <Route path="/About" component={About}/>
          <Route path="/Online" component={Online}/>
          <Route path="/Offline" component={Offline}/>
          <Route path="/Contact" component={Contact}/>
        </Switch>
      </Router>
    </div>
  );
}
export default App;

 Navbarmenu.js 
import React,{useState} from 'react';
import {NavLink, Link} from 'react-router-dom';
import {FiAlignRight,FiXCircle,FiChevronDown } from "react-icons/fi";
import logo from '../../img/logo.png';
const Navbarmenu = () => {
    const [isMenu, setisMenu] = useState(false);
    const [isResponsiveclose, setResponsiveclose] = useState(false);
    const toggleClass = () => {
      setisMenu(isMenu === false ? true : false);
      setResponsiveclose(isResponsiveclose === false ? true : false);
  };
    let boxClass = ["main-menu menu-right menuq1"];
    if(isMenu) {
        boxClass.push('menuq2');
    }else{
        boxClass.push('');
    }
    const [isMenuSubMenu, setMenuSubMenu] = useState(false);
    const toggleSubmenu = () => {
      setMenuSubMenu(isMenuSubMenu === false ? true : false);
    };
    let boxClassSubMenu = ["sub__menus"];
    if(isMenuSubMenu) {
        boxClassSubMenu.push('sub__menus__Active');
    }else {
        boxClassSubMenu.push('');
    }
    return (
    <header className="header__middle">
        <div className="container">
            <div className="row">
                {/* Add Logo  */}
                <div className="header__middle__logo">
                    <NavLink exact activeClassName='is-active' to="/">
                        <img src={logo} alt="logo" /> 
                    </NavLink>
                </div>
                <div className="header__middle__menus">
                    <nav className="main-nav " >
                    {/* Responsive Menu Button */}
                    {isResponsiveclose === true ? <> 
                        <span className="menubar__button" style={{ display: 'none' }} onClick={toggleClass} > <FiXCircle />   </span>
                    </> : <> 
                        <span className="menubar__button" style={{ display: 'none' }} onClick={toggleClass} > <FiAlignRight />   </span>
                    </>}
                    <ul className={boxClass.join(' ')}>
                        <li  className="menu-item" >
                            <NavLink exact activeClassName='is-active' onClick={toggleClass} to={`/`}> Home </NavLink> 
                        </li>
                        <li className="menu-item " ><NavLink onClick={toggleClass} activeClassName='is-active' to={`/About`}> About </NavLink> </li>
                        <li onClick={toggleSubmenu} className="menu-item sub__menus__arrows" > <Link to="#"> Shop <FiChevronDown /> </Link>
                            <ul className={boxClassSubMenu.join(' ')} > 
                                <li> <NavLink onClick={toggleClass} activeClassName='is-active'  to={`/Online`}> Online Shop </NavLink> </li>
                                <li><NavLink onClick={toggleClass} activeClassName='is-active' to={`/Offline`}> Offline Shop </NavLink> </li>
                            </ul>
                        </li>
                        <li className="menu-item " ><NavLink onClick={toggleClass} activeClassName='is-active' to={`/Contact`}> Contact </NavLink> </li>
                    </ul>
                    </nav>     
                </div>   
            </div>
	    </div>
    </header>
    )
}
export default Navbarmenu