Responsive Mobile Navigation with Tailwind CSS and React

Designing navigation that works beautifully across screen sizes is essential. In this guide, you'll build a responsive mobile navigation menu using Tailwind CSS and React—with state-driven interactivity and smooth styling.

Features

• Hamburger menu toggle for small screens
• Horizontal links on large screens
• Tailwind-powered transitions and responsiveness
• Clean, reusable component structure

Navigation.js

import { useState } from 'react' import { Menu, X } from 'lucide-react' const links = [ { name: 'Home', href: '#' }, { name: 'Features', href: '#' }, { name: 'Pricing', href: '#' }, { name: 'Contact', href: '#' }, ] export default function Navigation() { const [open, setOpen] = useState(false) return ( <nav className="bg-white border-b shadow-sm"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="flex justify-between items-center h-16"> {/* Logo */} <div className="flex-shrink-0 font-bold text-xl text-indigo-600"> MySite </div> {/* Desktop Links */} <div className="hidden md:flex space-x-6"> {links.map((link) => ( <a key={link.name} href={link.href} className="text-gray-700 hover:text-indigo-600 transition" > {link.name} </a> ))} </div> {/* Mobile Button */} <div className="md:hidden"> <button onClick={() => setOpen(!open)} className="text-gray-700 hover:text-indigo-600 transition" > {open ? <X size={24} /> : <Menu size={24} />} </button> </div> </div> </div> {/* Mobile Menu */} {open && ( <div className="md:hidden px-4 pb-4 space-y-2"> {links.map((link) => ( <a key={link.name} href={link.href} className="block text-gray-700 hover:text-indigo-600 transition" > {link.name} </a> ))} </div> )} </nav> ) } 

How It Works

• The component uses useState to track if the mobile menu is open.
• On large screens (md: and up), links are shown inline.
• On small screens, a hamburger menu toggles vertical links.
• Uses Lucide icons (Menu, X) for visual clarity.

Tailwind Highlights

• hidden md:flex to show/hide links
• border-b, shadow-sm for clean header styles
• transition on hover states for smooth effects
• space-y-2 for vertical spacing in mobile menu

Tips for Production

• Handle outside clicks to auto-close menu
• Animate menu open/close with framer-motion
• Use NavLink from React Router for active state
• Support accessibility with ARIA attributes

Final Thoughts

This mobile-first navigation pattern helps ensure your UI remains clean, responsive, and interactive—without adding unnecessary complexity.

For more scalable Tailwind UI strategies:

Mastering Tailwind at Scale: Architecture, Patterns & Performance

Start clean, stay fast—Tailwind and React make mobile menus a breeze.