+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] How to Build a Responsive React Navbar with Dropdown and Mobile Menu (/thread-103629.html)
[Tut] How to Build a Responsive React Navbar with Dropdown and Mobile Menu - xSicKxBot - 12-10-2025
[Tut] How to Build a Responsive React Navbar with Dropdown and Mobile Menu
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2025/12/how-to-build-a-responsive-react-navbar-with-dropdown-and-mobile-menu.jpg" width="550" height="288" title="" alt="" /></div><div><div class="modified-on" readability="7.1489361702128"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on November 25th, 2025.</div>
<p>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 <a href="https://phppot.com/react/react-dropdown-menu/">multi-level menu</a> to fit the layout into a small viewport.</p>
<p>With this React example code you’ll 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>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24718" src="https://phppot.com/wp-content/uploads/2025/11/responsive-react-navbar-dropdown-mobile-menu-550x288.jpg" alt="Responsive React Navbar Dropdown Mobile Menu" width="550" height="288" srcset="https://phppot.com/wp-content/uploads/2025/11/responsive-react-navbar-dropdown-mobile-menu-550x288.jpg 550w, https://phppot.com/wp-content/uploads/2025/11/responsive-react-navbar-dropdown-mobile-menu-300x157.jpg 300w, https://phppot.com/wp-content/uploads/2025/11/responsive-react-navbar-dropdown-mobile-menu-768x402.jpg 768w, https://phppot.com/wp-content/uploads/2025/11/responsive-react-navbar-dropdown-mobile-menu.jpg 1200w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<h2>Responsive navbar in React header</h2>
<p>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 <a href="https://phppot.com/jquery/jquery-sidebar-expand-collapse/">click-to-expand effect</a>.</p>
<p>The menuData contains the array of multi-level menu items. The image shown below renders the <a href="https://phppot.com/jquery/how-to-create-horizontal-scrolling-menu-using-jquery-and-php/">horizontal menu on the site header</a>.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24609" src="https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-550x106.jpg" alt="react drop down navbar" width="550" height="106" srcset="https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-550x106.jpg 550w, https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-300x58.jpg 300w, https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-768x149.jpg 768w, https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-1536x297.jpg 1536w, https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar.jpg 1731w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<p class="code-heading"><code>src/components/Navbar/Navbar.jsx</code></p>
<pre class="prettyprint"><code class="language-jsx">import { useState } from "react";
import menuData from "./MenuData";
import Dropdown from "./DropDown";
import "../../../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); } };
return ( <nav className="navbar"> <div className="navbar-container"> <h2 className="logo"></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="expand">▼</span> </a> {menu.subMenu && ( <Dropdown items={menu.subMenu} className={openIndex === i ? "open" : ""} /> )} </li> ))} </ul> </div> </nav>
);
};
export default Navbar;
</code></pre>
<p>These are the main and submenu items defined for this React example.</p>
<p class="code-heading"><code>src/components/Navbar/MenuData.js</code></p>
<pre class="prettyprint"><code class="language-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: "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" ] }
]; export default menuData;
</code></pre>
<h2>React menu dropdown hooks to toggle submenu</h2>
<p>A component Dropdown returns the submenu look-and-feel. The React state openIndex has the menu open/close state by its index.</p>
<p>The Dropdown component’s expand/collapse state is depends on the menuOpen set with a toggle action. The <a href="https://phppot.com/jquery/toggle-html-with-jquery/">menu toggle effect</a> is for the mobile view to slide down the menu options on clicking a burger icon.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24611" src="https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-menu-550x210.jpg" alt="react drop down navbar menu" width="550" height="210" srcset="https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-menu-550x210.jpg 550w, https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-menu-300x115.jpg 300w, https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-menu-768x294.jpg 768w, https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-menu.jpg 918w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<p class="code-heading"><code>src/components/Navbar/DropDown.jsx</code></p>
<pre class="prettyprint"><code class="language-jsx">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">›</span> </a> {item.subMenu && ( <Dropdown items={item.subMenu} className={openIndex === i ? "open" : ""} /> )} </li> ) )} </ul> );
};
export default Dropdown;
</code></pre>
<h2>Mobile menu navbar view</h2>
<p>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>
<p>This icon’s click event is bound to <a href="https://phppot.com/jquery/jquery-sliding-menu/">toggle a sliding menu</a>. In this sliding menu, each menu items are vertically expandable to show its submenu.<br /><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24614" src="https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-mobile-responsive-550x545.jpg" alt="react drop down navbar mobile responsive" width="550" height="545" srcset="https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-mobile-responsive-550x545.jpg 550w, https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-mobile-responsive-300x297.jpg 300w, https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-mobile-responsive-150x150.jpg 150w, https://phppot.com/wp-content/uploads/2025/11/react-drop-down-navbar-mobile-responsive.jpg 621w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<p><strong>References:</strong></p>
<ol>
<li><a href="https://m3.material.io/components/navigation-bar/overview" target="_blank" rel="noopener">Navigation bar modals with Material Design</a>.</li>
<li><a href="https://www.figma.com/community/website-templates/navbar?resource_type=mixed&editor_type=all&price=free&sort_by=all_time">Free navigation bar templates by Figma</a>.</li>
</ol>
<p><a class="download" href="https://phppot.com/downloads/react/responsive-react-navbar-dropdown-mobile-menu.zip">Download</a></p>
<div class="written-by" readability="9.8427672955975">
<div class="author-photo"> <img loading="lazy" decoding="async" src="https://phppot.com/wp-content/themes/solandra/images/Vincy.jpg" alt="Vincy" width="100" height="100" title="Vincy"> </div>
<div class="written-by-desc" readability="14.764150943396"> Written by <a href="https://phppot.com/about/">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>
</p></div>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Related Tutorials</h2>
</p></div>
<p> <a href="https://phppot.com/react/responsive-react-navbar-dropdown-mobile-menu/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2025/11/12/how-to-build-a-responsive-react-navbar-with-dropdown-and-mobile-menu/