Creating a Responsive Navbar in React: A Beginner's Guide

Creating a Responsive **Navbar in React: A Step-by-Step Guide**

Are you looking to add a responsive navbar to your React application? If so, you're in the right place! In this blog, we'll guide you through the process of building a responsive navbar in React using the code provided.

Before we get started, I want to let you know that this is my first blog, so please let me know in the comments if you'd like to see more blogs like this.

So, let's dive right in!

Step 1: Set Up Your React Application
First, you'll need to set up your React application if you haven't already. This can be done using create-react-app or another similar tool that you're familiar with.

Step 2: Creating the Navbar Component

In React, we can create reusable components that can be used throughout our application. To create the Navbar component, create a new file called "Navbar.jsx" in the "src" directory.

Next, we'll add the following code to our **Navbar.jsx **file::

import { useState } from 'react';
import  styles from './Navbar.module.css';

function Navbar() {
  // adding the states 
  const [isActive, setIsActive] = useState(false);

  //add the active class
  const toggleActiveClass = () => {
    setIsActive(!isActive);
  };

  //clean up function to remove the active class
  const removeActive = () => {
    setIsActive(false)
  }

  return (
    <div className="App">
      <header className="App-header">

        <nav className={`${styles.navbar}`}>

          {/* logo */}
          <a href='#home' className={`${styles.logo}`}>Dev. </a>

          <ul className={`${styles.navMenu} ${isActive ? styles.active : ''}`}>
            <li onClick={removeActive}>
              <a href='#home' className={`${styles.navLink}`}>Home</a>
            </li>
            <li onClick={removeActive}>
              <a href='#home' className={`${styles.navLink}`}>Catalog</a>
            </li>
            <li onClick={removeActive}>
              <a href='#home' className={`${styles.navLink}`}>All products</a>
            </li>
            <li onClick={removeActive}>
              <a href='#home' className={`${styles.navLink}`}>Contact</a>
            </li>
          </ul>

          <div className={`${styles.hamburger} ${isActive ? styles.active : ''}`}  onClick={toggleActiveClass}>
            <span className={`${styles.bar}`}></span>
            <span className={`${styles.bar}`}></span>
            <span className={`${styles.bar}`}></span>
          </div>
        </nav>

      </header>
    </div>
  );
}

export default Navbar;

The useState hook is used to create a state variable called isActive, which is initially set to false. This state variable is used to toggle the class active on the navigation menu and the hamburger icon when it is clicked.

The toggleActiveClass function is used to toggle the isActive state variable when the hamburger icon is clicked. The removeActive function is used to set the isActive state variable to false when any of the navigation links are clicked.

The navigation menu is a unordered list with links to various pages of the website. Each link is enclosed in a list item tag, and when clicked, the removeActive function is called to remove the active class from the navigation menu and hamburger icon.

_Step 3: Add CSS Styling to the **Navbar_**
To style the navbar, we've created a CSS module file called _Navbar.module.css _and import it in Navbar.jsx like so import styles from './Navbar.module.css. Here's the code for that file:

/* default styling */

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

  ul {
    list-style: none;
  }

  a {
    text-decoration: none;
    color: black;
    font-size: 18px;
  }

  /* navbar */
  .navbar {
    background-color: aliceblue;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    min-height: 70px;
  }


  /* logo  */
  .logo {
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
  }


  /* ul  */
  .navMenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
  }

  /* media queries */

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

    /* hamburger */
    .hamburger {
      display: block;
      cursor: pointer;
    }

    .bar {
          background-color: #120f0b;
          width: 20px;
          height: 3px;
          display: block;
          margin: 5px;
          -webkit-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
      }

    /* adding active class to the bars  */
    .hamburger.active .bar:nth-child(2){
      opacity: 0;
    }
    .hamburger.active .bar:nth-child(1){
      transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3){
      transform: translateY(-8px) rotate(-45deg);
    }


    /* navMenu */

    .navMenu{
      position: absolute;
      flex-direction: column;
      gap: 0;
      top: 70px;
      left: -100%;
      text-align: start;
      width: 100%;
      transition: 0.7s ease-in-out;
      background-color: aliceblue;
      padding: 10px;
    }

    .navMenu.active{
      left: 0;
    }

    .navMenu li {
      margin: 16px 0;
    }
  }

This code defines the default styling for a webpage's navbar. The first few lines use the universal selector (*) to remove any padding and margin set by the browser and to set the box-sizing to border-box, which includes any borders and padding within the element's total width and height.

The code then defines styles for the unordered list (ul) element used to contain the navbar links. It removes the default list-style and sets the text-decoration to none, color to black, and font-size to 18px for all links (a) in the navbar.

The .navbar class defines the background color, padding, and layout of the navbar container. It uses flexbox to set the horizontal spacing between the elements to 40px and to vertically center the elements with the min-height property set to 70px.

The .logo class sets the font-size and font-family for the navbar logo.

The .navMenu class defines the layout and spacing for the navbar links. It sets the display to flex and uses the justify-content and gap properties to evenly space the links.

The code then defines media queries to adjust the navbar for smaller screen sizes. When the screen width is less than 780px, the .hamburger **class sets the display to block and cursor to pointer, and the .bar class defines the styling for the three horizontal bars that represent the menu icon. The code uses the **nth-child selector to set the position and rotation of the bars when the hamburger menu is active.

The .navMenu class is also modified to adjust the layout of the links when the hamburger menu is active. It uses the position property to set the menu to appear below the navbar with the left property set to -100% to hide it from view. When the menu is active, the left property is set to 0 to reveal the menu. Finally, the **.navMenu li **class sets the margin for each link in the menu.
Here's the final look:

That's it for now! I hope you found this tutorial helpful in creating your own responsive navbar in React.

If you have any questions, feedback or suggestions, feel free to leave a comment below.

Also, if you want to check out the complete code for this project, you can find it on GitHub.

You can also connect with me on
LinkedIn

Thank you for reading and happy coding!