Responsive Navigation Bar.

Responsive navigation is important when you want to view a menu with a mobile device. So in this article, we will be creating a functional navigation bar with React.js without using any dependencies or framework. We will build everything from the ground up using only native React features and CSS

prerequisites: Basic Knowledge of HTML, CSS and React.js

Preview

We are going to be creating a web app navbar. This navbar is going to contain a logo and some links. when the screen max-width is larger or at 650px the navbar will be displayed horizontally and when the max-width is below 650px, the links will disappear instead we will see a hamburger button at the right-hand side which will be used to open the mobile menu, which will be displayed vertically, with a close button "X" at the top right that will be used to close the menu.

CODE:

Below is the code that can be used to create a nav bar.

start a new react project

npx create-react-app project-name

The name of the project does not matter. After installing you create a Navbarcomponent folder inside your src folder, which is where you will create a Nav.js file and Nav.css file.

The code below will be written inside the Nav.js.

import React from "react";
import { FiMenu } from "react-icons/fi";
import { MdOutlineRestaurantMenu } from "react-icons/md";
import "./Navbar.css";

const Navbar = () => {
  const [toggle, setToggle] = React.useState(false);
  return (
    <nav className="app__navbar">
      <div className="app__navbar-logo">
        <img src="logo" alt="logo" />
      </div>

       ///// The desktop View

      <ul className="app__navbar-links">
        <li>
          <a href="#home">home</a>
        </li>
        <li >
          <a href="#about">About</a>
        </li>
        <li >
          <a href="#menu">Menu</a>
        </li>
        <li >
          <a href="#awards">Awards</a>
        </li>
        <li >
          <a href="#contact">Contact</a>
        </li>
      </ul>

      //////Smallscreen view/////

      <div className="app__navbar-smallscreen">
       <button>
          <FiMenu
          color="#fff"
          fontSize={27}
          onClick={() => setToggle(true)}
        />
       </button>


        {toggle && (
          <div className="app__navbar-smallscreen_overlay flex__center slide-       bottom">
        <button>
           <MdOutlineRestaurantMenu
              color="#fff"
              fontSizeAdjust={27}
              className="overlay__close"
              onClick={() => setToggle(false)}
            />
        </button>

            <ul className="app__navbar-smallscreen_links">
              <li >
                <a href="#home">home</a>
              </li>
              <li >
                <a href="#about">About</a>
              </li>
              <li >
                <a href="#menu">Menu</a>
              </li>
              <li>
                <a href="#awards">Awards</a>
              </li>
              <li>
                <a href="#contact">Contact</a>
              </li>
            </ul>
          </div>
        )}
      </div>
    </nav>
  );
};

export default Navbar;

Inside the Nav.js file we first import two icons from the react-icons library <FiMenu/>, <MdOutlineRestaurantMenu/>. Subsequently in the Navbar arrow function we first invoked the useState hook const [toggle, setToggle] = React.useState(false), you will also notice we created two ul navbar links one for the big screen and another one for the smaller screen. the first logic took place inside the Fimenu icon, where we called an onClick function that changes the state value of toggle to true, this click function displays the navbar links. After the Fimenu buttton is a logical operator which checks if toggle is true, and if it is it will display the <div> with the classname of app__navbar-smallscreen_overlay which is our mobile navbar. Next is the MdOutlineRestaurantMenu icon which changes the state value of toggle to false this function closes the navbar links.

.app__navbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-black);
  padding: 1rem 2rem;
  position: sticky;
}
.app__navbar-logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.app__navbar-logo img {
  width: 150px;
}
.app__navbar-links {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}
.app__navbar-links li {
  margin: 0 1rem;
  cursor: pointer;
}
.app__navbar-links li:hover {
  color: var(--color-grey);
}

.app__navbar-smallscreen {
  display: none;
}
.app__navbar-smallscreen_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--color-black);
  transition: 0.5s ease;

  flex-direction: column;
  z-index: 5;
}
.app__navbar-smallscreen_overlay .overlay__close {
  font-size: 27px;
  color: var(--color-golden);

  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.app__navbar-smallscreen_links {
  list-style: none;
  text-align: center;
}
.app__navbar-smallscreen_links li {
  cursor: pointer;
  margin: 2rem;
  color: var(--color-golden);
  font-size: 2rem;
  font-family: var(--font-base);
}
.app__navbar-smallscreen_links:hover {
  color: #fff;
}

@media screen and (max-width: 2000px) {
  .app__navbar-logo img {
    width: 210px;
  }
}

@media screen and (max-width: 650px) {
.app__navbar-links {
    display: none;
  }
  .app__navbar-smallscreen {
    display: flex;
  }
  .app__navbar {
    padding: 1rem;
  }
  .app__navbar-logo img {
    width: 110px;
  }
}

The css file contains basic css stlying so i won't go into full details how we wrote all the codes from start to finish will only focus on key ones, that makes the mobile navbar appear. And the first thing we would notice is that the app__navbar-smallscreen class display is set at none , this property hides the small screen navbar in the big screen. And as you can see when we reached a max-width of 659px in our viewpoint we changed the app__navbar-smallscreen class to display: flex and the app__navbar-links class was changed to display:none .

Note : you can also make your small screen navbar visible in tablets also, and you can do this just by changing the max-width of your media screen.

How to create a responsive Navigation Bar with React.js

Preview