Methods to Construct a Responsive React Navbar with Dropdown and Cell Menu

A responsive navigation bar is a one in every of a must-needed requirement of any trendy net software. It’s a straightforward job if the navigation bar incorporates single stage menu and motion controls. However, it will likely be advanced it’s a multi-level menu to suit the format right into a small viewport.

With this React instance code you’ll learn to construct a responsive React navbar. It features a multi-level dropdown menu for various view port. It is going to a plugable and reusable React element to your totally different software frontend.

Responsive navbar in React header

This React JSX code has the a responsive navigation bar element. It offers 1) menu bar with Desktop and cell variants, 2)sub menu bar with click-to-expand impact.

The menuData incorporates the array of multi-level menu gadgets. The picture proven beneath renders the horizontal menu on the location header.

src/parts/Navbar/Navbar.jsx

import { useState } from "react";
import menuData from "./MenuData";
import Dropdown from "./DropDown";
import "../../../public/belongings/css/fashion.css";

const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const [openIndex, setOpenIndex] = useState(null); 

  const toggleSubmenu = (index, e) => {
    if (window.innerWidth <= 768) {
      e.preventDefault(); 
      setOpenIndex(openIndex === index ? null : index);
    }
  };
return (
  <nav className="navbar">
    <div className="navbar-container">
      <h2 className="emblem"></h2>
      <button
        className="menu-toggle"
        onClick={() => setMenuOpen(!menuOpen)}
        aria-label="Toggle menu"
      >
        ☰
      </button>
      <ul className={`menu ${menuOpen ? "open" : ""}`}>
        {menuData.map((menu, i) => (
          <li key={i} className="menu-item has-submenu">
            <a href="#" onClick={(e) => toggleSubmenu(i, e)}>
              {menu.title}
              <span className="increase">▼</span>
            </a>
            {menu.subMenu && (
              <Dropdown
                gadgets={menu.subMenu}
                className={openIndex === i ? "open" : ""}
              />
            )}
          </li>
        ))}
      </ul>
    </div>
  </nav>
);
};
export default Navbar;

These are the primary and submenu gadgets outlined for this React instance.

src/parts/Navbar/MenuData.js

const menuData = [
  {
    title: "Popular Toys",
    subMenu: [
      {
        title: "Video Games",
        subMenu: [
          { title: "Car", subMenu: ["Racing Car", "Toy Car", "Remote Car"] },
          "Bike Race", "Fishing"
        ]
      },
      "Barbies", "Teddy Bear", "Golf Set"
    ]
  },
  {
    title: "Current Toys",
    subMenu: [
      "Yoyo", "Doctor Kit",
      { title: "Fun Puzzle", subMenu: ["Cards", "Numbers"] },
      "Uno Playing cards"
    ]
  },
  {
    title: "Toys Class",
    subMenu: [
      "Battery Toys",
      { title: "Remote Toys", subMenu: ["Cars", "Aeroplane", "Helicopter"] },
      "Smooth Toys", "Magnet Toys"
    ]
  }
];

export default menuData;

React menu dropdown hooks to toggle submenu

A element Dropdown returns the submenu look-and-feel. The React state openIndex has the menu open/shut state by its index.

The Dropdown element’s increase/collapse state is is determined by the menuOpen set with a toggle motion. The menu toggle impact is for the cell view to slip down the menu choices on clicking a burger icon.

src/parts/Navbar/DropDown.jsx

import { useState } from "react";

const Dropdown = ({ gadgets, className }) => {
  const [openIndex, setOpenIndex] = useState(null);

  const toggleSubmenu = (index, e) => {
    if (window.innerWidth <= 768) {
      e.preventDefault();
      setOpenIndex(openIndex === index ? null : index);
    }
  };
  return (
    <ul className={`dropdown $`}>
      {gadgets.map((merchandise, i) =>
        typeof merchandise === "string" ? (
          <li key={i}>
            <a href="#">{merchandise}</a>
          </li>
        ) : (
          <li key={i} className="has-submenu">
            <a href="#" onClick={(e) => toggleSubmenu(i, e)}>
              {merchandise.title}
              <span className="increase">›</span>
            </a>
            {merchandise.subMenu && (
              <Dropdown
                gadgets={merchandise.subMenu}
                className={openIndex === i ? "open" : ""}
              />
            )}
          </li>
        )
      )}
    </ul>
  );
};
export default Dropdown;

Cell menu navbar view

This heading exhibits the cell view of this responsive navbar. Within the cell view, a burger icon will likely be appeared on the highest proper nook of the online format.

This icon’s click on occasion is certain to toggle a sliding menu. On this sliding menu, every menu gadgets are vertically expandable to point out its submenu.

References:

1. Navigation bar modals with Materials Design.
2. Free navigation bar templates by Figma.

Obtain