{"id":135249,"date":"2025-11-12T05:37:58","date_gmt":"2025-11-12T05:37:58","guid":{"rendered":"https:\/\/phppot.com\/?p=24603"},"modified":"2025-11-12T05:37:58","modified_gmt":"2025-11-12T05:37:58","slug":"how-to-build-a-responsive-react-navbar-with-dropdown-and-mobile-menu","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2025\/11\/12\/how-to-build-a-responsive-react-navbar-with-dropdown-and-mobile-menu\/","title":{"rendered":"How to Build a Responsive React Navbar with Dropdown and Mobile Menu"},"content":{"rendered":"
by Vincy<\/a>. Last modified on November 25th, 2025.<\/div>\n

A responsive navigation bar is a one of a must-needed requirement of any modern web application. It is an easy job if the navigation bar contains single level menu and action controls. But, it will be complex it is a multi-level menu<\/a> to fit the layout into a small viewport.<\/p>\n

With this React example code you\u2019ll learn how to build a responsive React navbar. It includes a multi-level dropdown menu for different view port. It will a plugable and reusable React component for your different application frontend.<\/p>\n

\"Responsive<\/p>\n

Responsive navbar in React header<\/h2>\n

This React JSX code has the a responsive navigation bar component. It provides 1) menu bar with Desktop and mobile variants, 2)sub menu bar with click-to-expand effect<\/a>.<\/p>\n

The menuData contains the array of multi-level menu items. The image shown below renders the horizontal menu on the site header<\/a>.<\/p>\n

\"react<\/p>\n

src\/components\/Navbar\/Navbar.jsx<\/code><\/p>\n

import { useState } from \"react\";\nimport menuData from \".\/MenuData\";\nimport Dropdown from \".\/DropDown\";\nimport \"..\/..\/..\/public\/assets\/css\/style.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); } };\nreturn ( <nav className=\"navbar\"> <div className=\"navbar-container\"> <h2 className=\"logo\"><\/h2> <button className=\"menu-toggle\" onClick={() => setMenuOpen(!menuOpen)} aria-label=\"Toggle menu\" > \u2630 <\/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=\"expand\">\u25bc<\/span> <\/a> {menu.subMenu && ( <Dropdown items={menu.subMenu} className={openIndex === i ? \"open\" : \"\"} \/> )} <\/li> ))} <\/ul> <\/div> <\/nav>\n);\n};\nexport default Navbar;\n<\/code><\/pre>\n
These are the main and submenu items defined for this React example.<\/p>\n
src\/components\/Navbar\/MenuData.js<\/code><\/p>\n
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: \"Recent Toys\", subMenu: [ \"Yoyo\", \"Doctor Kit\", { title: \"Fun Puzzle\", subMenu: [\"Cards\", \"Numbers\"] }, \"Uno Cards\" ] }, { title: \"Toys Category\", subMenu: [ \"Battery Toys\", { title: \"Remote Toys\", subMenu: [\"Cars\", \"Aeroplane\", \"Helicopter\"] }, \"Soft Toys\", \"Magnet Toys\" ] }\n]; export default menuData;\n<\/code><\/pre>\n
React menu dropdown hooks to toggle submenu<\/h2>\n
A component Dropdown returns the submenu look-and-feel. The React state openIndex has the menu open\/close state by its index.<\/p>\n
The Dropdown component\u2019s expand\/collapse state is depends on the menuOpen set with a toggle action. The menu toggle effect<\/a> is for the mobile view to slide down the menu options on clicking a burger icon.<\/p>\n
\"react<\/p>\n
src\/components\/Navbar\/DropDown.jsx<\/code><\/p>\n
import { useState } from \"react\"; const Dropdown = ({ items, 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 ${className || \"\"}`}> {items.map((item, i) => typeof item === \"string\" ? ( <li key={i}> <a href=\"#\">{item}<\/a> <\/li> ) : ( <li key={i} className=\"has-submenu\"> <a href=\"#\" onClick={(e) => toggleSubmenu(i, e)}> {item.title} <span className=\"expand\">\u203a<\/span> <\/a> {item.subMenu && ( <Dropdown items={item.subMenu} className={openIndex === i ? \"open\" : \"\"} \/> )} <\/li> ) )} <\/ul> );\n};\nexport default Dropdown;\n<\/code><\/pre>\n
Mobile menu navbar view<\/h2>\n
This heading shows the mobile view of this responsive navbar. In the mobile view, a burger icon will be appeared on the top right corner of the web layout.<\/p>\n
This icon\u2019s click event is bound to toggle a sliding menu<\/a>. In this sliding menu, each menu items are vertically expandable to show its submenu.
\"react<\/p>\n
References:<\/strong><\/p>\n
    \n
  1. Navigation bar modals with Material Design<\/a>.<\/li>\n
  2. Free navigation bar templates by Figma<\/a>.<\/li>\n<\/ol>\n
    Download<\/a><\/p>\n
    \n
     \"Vincy\" <\/div>\n
     Written by Vincy<\/a>, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials. <\/div>\n<\/p><\/div>\n
      <\/p>\n
    \n
    Related Tutorials<\/h2>\n<\/p><\/div>\n
     \u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"
    by Vincy. Last modified on November 25th, 2025. A responsive navigation bar is a one of a must-needed requirement of any modern web application. It is an easy job if the navigation bar contains single level menu and action controls. But, it will be complex it is a multi-level menu to fit the layout into […]<\/p>\n","protected":false},"author":2,"featured_media":135250,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-135249","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/135249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=135249"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/135249\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/135250"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=135249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=135249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=135249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}