Responsive Navigation Bar with Tailwind CSS: 5 Patterns That Work

Navigation is the backbone of any website. Here are five responsive navbar patterns built with Tailwind CSS — each solves a different UX problem.

1. Classic Hamburger Menu

Desktop: horizontal links. Mobile: hamburger icon that reveals a dropdown. The most common pattern and what users expect.

<header class="bg-white dark:bg-neutral-950 border-b border-neutral-200 dark:border-neutral-800">
  <div class="max-w-7xl mx-auto px-4 flex items-center justify-between h-16">
    <a href="#" class="text-xl font-bold text-neutral-900 dark:text-white">Brand</a>
    <nav class="hidden md:flex items-center gap-6">
      <a href="#" class="text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white">Features</a>
      <a href="#" class="text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white">Pricing</a>
      <a href="#" class="px-4 py-2 bg-indigo-600 text-white rounded-lg">Get Started</a>
    </nav>
    <button class="md:hidden p-2" aria-label="Menu">
      <svg class="w-6 h-6 text-neutral-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>
  </div>
</header>

2. Sticky Transparent Header

Starts transparent over a hero image, becomes solid on scroll. Creates a premium feel.

3. Mega Menu

For sites with many pages — dropdown panels with categories, descriptions, and icons. Common on SaaS and enterprise sites.

4. Sidebar Navigation

Full-height sidebar that slides in on mobile. Works well for dashboards and documentation sites.

5. Centered Logo with Split Links

Logo in the center, links split on either side. Elegant for brand-focused sites.