How to Build Responsive and Interactive Navbar in React

This tutorial teaches how to create a responsive navbar in React js using custom CSS and React hooks. We’ll use useState, and useEffect to build the react responsive navbar component.

The responsive navigation bar is a UI element; ideally, used in the website or apps containing links to other pages or the location of the website.

The term Responsive refers to setting or adjusting its dimension based on the screen or device size.

We will also demystify how to style a navbar component in React. Therefore, we will use custom CSS to create a responsive navbar component in React.

React Js Responsive Navbar Tutorial with Example

  • Step 1: Create React Project
  • Step 2: Create Responsive Nav Component
  • Step 4: Style Menu Component
  • Step 5: Update Global Component
  • Step 6: Test App on Browser

Create React Project

Go to the code editor, open and type the following command on the console, then run the command to form a new react app.

npx create-react-app my-react-app

Create Responsive Nav Component

Within your src/ directory, create components folder, create ResNav.js file then add given code to the file.

import React, { useState, useEffect } from "react";

function ResNav() {
  const [navToggle, setNavToggle] = useState(false);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  const toggleBtn = () => {
    setNavToggle(!navToggle);
  };

  useEffect(() => {
    const updateDimension = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener("resize", updateDimension);
    return () => {
      window.removeEventListener("resize", updateDimension);
    };
  }, []);

  return (
    <nav>
      {(navToggle || windowWidth > 600) && (
        <ul className="menu">
          <li className="nav-item">Home</li>
          <li className="nav-item">Products</li>
          <li className="nav-item">Contact</li>
        </ul>
      )}

      <button onClick={toggleBtn} className="nav-btn">
        Open nav
      </button>
    </nav>
  );
}

export default ResNav;

Style Menu Component

We have created the basic structure for React nav-bar component. Now, we will write some custom CSS, and this will make the navbar comonent fully responsive.

Our responsive navbar will adjust its dimension on a smaller device. Hence, add the given code to the App.css file.

nav {
  position: fixed;
  top: 0;
  height: 55px;
  width: 100%;
  background: linear-gradient(to right, #ff5858, #f857a6);
}

.menu {
  margin: 0;
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
  list-style-type: none;
  justify-content: center;
  background: linear-gradient(to right, #ff5858, #f857a6);
}

.nav-item {
  margin-right: 20px;
  font-size: 20px;
  color: #f1f1f1;
  cursor: pointer;
}

.nav-btn {
  display: none;
  position: absolute;
  right: 10px;
  top: 7px;
  padding: 5px;
  color: #000;
  font-size: 18px;
}

@media screen and (max-width: 500px) {
  .menu {
    flex-direction: column;
    height: auto;
  }
  .nav-item:nth-child(1) {
    margin-top: 55px;
    border-top: 1px solid rgba(255, 249, 249, 0.555);
  }
  .nav-item {
    width: 100%;
    padding: 22px 0;
    text-align: center;
    margin-right: 0px;
    border-top: 1px solid rgba(255, 249, 249, 0.555);
  }
  .nav-btn {
    display: block;
  }
}

Update Global Component

Our component is ready, in order to view its response on the browser make sure to add or register the ResNav component to App.js file.

import "./App.css";
import ResNav from "./components/ResNav";

function App() {
  return (
    <div className="App">
      <ResNav />
    </div>
  );
}

export default App;

Test App on Browser

Now, type and execute the suggested command and serve the app on the browser with given url.

npm start
http://localhost:3000

How to Build Responsive and Interactive Navbar in React