How to Build a Modern Responsive Navigation Bar in React and Tailwind CSS

<p data-path-to-node="5">Creating a responsive navigation bar is a fundamental skill for any modern frontend developer. A clean, mobile-friendly navigation bar ensures a seamless user experience across desktop, tablet, and mobile screens.</p> <p data-path-to-node="6">In this guide, we will walk through building a modern navigation bar using <strong data-path-to-node="6" data-index-in-node="75">React</strong> and <strong data-path-to-node="6" data-index-in-node="85">Tailwind CSS</strong>.</p> <h3 data-path-to-node="7">Prerequisites</h3> <p data-path-to-node="8">Before getting started, make sure you have:</p> <ul data-path-to-node="9"> <li> <p data-path-to-node="9,0,0">Node.js installed on your machine</p> </li> <li> <p data-path-to-node="9,1,0">A React project set up (via Vite or Create React App)</p> </li> <li> <p data-path-to-node="9,2,0">Tailwind CSS configured in your React application</p> </li> </ul> <h3 data-path-to-node="11">Step 1: Setting Up the Component Structure</h3> <p data-path-to-node="12">First, create a new file named <code data-path-to-node="12" data-index-in-node="31">Navbar.jsx</code> inside your <code data-path-to-node="12" data-index-in-node="54">components</code> directory:</p> <div class="code-block ng-tns-c1224548378-33 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwjrsaiUqbeWAxUAAAAAHQAAAAAQVw"> <div class="formatted-code-block-internal-container ng-tns-c1224548378-33"> <div class="animated-opacity ng-tns-c1224548378-33"> <div class="code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c1224548378-33 ng-star-inserted"><span class="ng-tns-c1224548378-33">JavaScript</span> <div class="buttons ng-tns-c1224548378-33 ng-star-inserted">&nbsp;</div> </div> <pre class="ng-tns-c1224548378-33"><code class="code-container formatted ng-tns-c1224548378-33" data-test-id="code-content"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; <span class="hljs-keyword">const</span> Navbar = <span class="hljs-function">() =&gt;</span> { <span class="hljs-keyword">const</span> [isOpen, setIsOpen] = useState(<span class="hljs-literal">false</span>); <span class="hljs-keyword">const</span> toggleMenu = <span class="hljs-function">() =&gt;</span> { setIsOpen(!isOpen); }; <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"bg-slate-900 text-white shadow-md w-full sticky top-0 z-50"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"flex items-center justify-between h-16"</span>&gt;</span> {/* Logo */} <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"flex-shrink-0 font-bold text-xl tracking-wide text-indigo-400"</span>&gt;</span> DevPortfolio <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> {/* Desktop Menu */} <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"hidden md:flex space-x-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#home"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"hover:text-indigo-400 transition"</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#about"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"hover:text-indigo-400 transition"</span>&gt;</span>About<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#projects"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"hover:text-indigo-400 transition"</span>&gt;</span>Projects<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#contact"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"hover:text-indigo-400 transition"</span>&gt;</span>Contact<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> {/* Mobile Hamburger Button */} <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"md:hidden flex items-center"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{toggleMenu}</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"text-gray-300 hover:text-white focus:outline-none"</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"h-6 w-6"</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"none"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 0 24 24"</span> <span class="hljs-attr">stroke</span>=<span class="hljs-string">"currentColor"</span>&gt;</span> {isOpen ? ( <span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">strokeLinecap</span>=<span class="hljs-string">"round"</span> <span class="hljs-attr">strokeLinejoin</span>=<span class="hljs-string">"round"</span> <span class="hljs-attr">strokeWidth</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M6 18L18 6M6 6l12 12"</span> /&gt;</span> ) : ( <span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">strokeLinecap</span>=<span class="hljs-string">"round"</span> <span class="hljs-attr">strokeLinejoin</span>=<span class="hljs-string">"round"</span> <span class="hljs-attr">strokeWidth</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M4 6h16M4 12h16M4 18h16"</span> /&gt;</span> )} <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> {/* Mobile Menu Dropdown */} {isOpen &amp;&amp; ( <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"md:hidden bg-slate-800 px-4 pt-2 pb-4 space-y-2"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#home"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"block hover:text-indigo-400 py-1"</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#about"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"block hover:text-indigo-400 py-1"</span>&gt;</span>About<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#projects"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"block hover:text-indigo-400 py-1"</span>&gt;</span>Projects<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#contact"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"block hover:text-indigo-400 py-1"</span>&gt;</span>Contact<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> )} <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span></span> ); }; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Navbar; </code></pre> </div> </div> </div> <h3 data-path-to-node="15">Conclusion</h3> <p data-path-to-node="16">With just a few lines of code and utility-first Tailwind classes, you can create a reusable, accessible, and fast navigation component. Customize the colors and link options to fit your project's unique brand identity!</p>