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.
In this guide, we will walk through building a modern navigation bar using React and Tailwind CSS.
Prerequisites
Before getting started, make sure you have:
-
Node.js installed on your machine
-
A React project set up (via Vite or Create React App)
-
Tailwind CSS configured in your React application
Step 1: Setting Up the Component Structure
First, create a new file named Navbar.jsx inside your components directory:
javascript
import React, { useState } from 'react';
const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleMenu = () => {
setIsOpen(!isOpen);
};
return (
<nav className="bg-slate-900 text-white shadow-md w-full sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
{/* Logo */}
<div className="flex-shrink-0 font-bold text-xl tracking-wide text-indigo-400">
DevPortfolio
</div>
{/* Desktop Menu */}
<div className="hidden md:flex space-x-8">
<a href="#home" className="hover:text-indigo-400 transition">Home</a>
<a href="#about" className="hover:text-indigo-400 transition">About</a>
<a href="#projects" className="hover:text-indigo-400 transition">Projects</a>
<a href="#contact" className="hover:text-indigo-400 transition">Contact</a>
</div>
{/* Mobile Hamburger Button */}
<div className="md:hidden flex items-center">
<button
onClick={toggleMenu}
type="button"
className="text-gray-300 hover:text-white focus:outline-none"
>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
{isOpen ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
)}
</svg>
</button>
</div>
</div>
{/* Mobile Menu Dropdown */}
{isOpen && (
<div className="md:hidden bg-slate-800 px-4 pt-2 pb-4 space-y-2">
<a href="#home" className="block hover:text-indigo-400 py-1">Home</a>
<a href="#about" className="block hover:text-indigo-400 py-1">About</a>
<a href="#projects" className="block hover:text-indigo-400 py-1">Projects</a>
<a href="#contact" className="block hover:text-indigo-400 py-1">Contact</a>
</div>
)}
</div>
</nav>
);
};
export default Navbar;
Conclusion
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!
