Responsive Mobile Navigation with Tailwind CSS and React

#tailwindcss #react #mobile #ui

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.

DEV Community