Back to Discover

Tailwind CSS Hamburger Menu Example

Amelia

Created Nov 03, 2025

6 views

1 likes

0 comments

0 forks

Export Fork Like

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gradient-to-br from-[#FFE4E1] via-[#FFF0EE] to-[#FFE4E1] min-h-screen">

  <div x-data="{ open: false }" class="relative">
    <!-- Navigation Bar -->
    <nav class="bg-white/80 backdrop-blur-sm shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <!-- Logo -->
          <div class="flex-shrink-0">
            <h1 class="text-2xl font-bold bg-gradient-to-r from-rose-400 to-pink-400 bg-clip-text text-transparent">
              Brand
            </h1>
          </div>

          <!-- Desktop Menu -->
          <div class="hidden md:flex items-center space-x-8">
            <a href="#" class="text-gray-700 hover:text-rose-400 transition-colors duration-200">Home</a>
            <a href="#" class="text-gray-700 hover:text-rose-400 transition-colors duration-200">About</a>
            <a href="#" class="text-gray-700 hover:text-rose-400 transition-colors duration-200">Services</a>
            <a href="#" class="text-gray-700 hover:text-rose-400 transition-colors duration-200">Portfolio</a>
            <a href="#" class="text-gray-700 hover:text-rose-400 transition-colors duration-200">Contact</a>
          </div>

          <!-- Hamburger Button -->
          <button 
                  @click="open = !open"
                  class="md:hidden relative w-10 h-10 flex items-center justify-center rounded-lg hover:bg-rose-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-rose-300"
                  aria-label="Toggle menu"
                  >
            <div class="w-6 h-5 flex flex-col justify-between">
              <span 
                    :class="open ? 'rotate-45 translate-y-2' : ''"
                    class="block h-0.5 w-full bg-gray-700 transition-all duration-300 ease-in-out"
                    ></span>
              <span 
                    :class="open ? 'opacity-0' : 'opacity-100'"
                    class="block h-0.5 w-full bg-gray-700 transition-all duration-300 ease-in-out"
                    ></span>
              <span 
                    :class="open ? '-rotate-45 -translate-y-2' : ''"
                    class="block h-0.5 w-full bg-gray-700 transition-all duration-300 ease-in-out"
                    ></span>
            </div>
          </button>
        </div>
      </div>
    </nav>

    <!-- Mobile Menu Overlay -->
    <div 
         x-show="open"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="open = false"
         class="fixed inset-0 bg-black/20 backdrop-blur-sm z-40 md:hidden"
         style="display: none;"
         ></div>

    <!-- Mobile Menu Panel -->
    <div 
         x-show="open"
         x-transition:enter="transition ease-out duration-300 transform"
         x-transition:enter-start="translate-x-full"
         x-transition:enter-end="translate-x-0"
         x-transition:leave="transition ease-in duration-200 transform"
         x-transition:leave-start="translate-x-0"
         x-transition:leave-end="translate-x-full"
         class="fixed top-0 right-0 h-full w-64 bg-white shadow-2xl z-50 md:hidden"
         style="display: none;"
         >
      <div class="flex flex-col h-full">
        <!-- Close Button -->
        <div class="flex justify-end p-4">
          <button 
                  @click="open = false"
                  class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-rose-50 transition-colors duration-200"
                  aria-label="Close menu"
                  >
            <ion-icon name="close-outline" class="text-2xl text-gray-700"></ion-icon>
          </button>
        </div>

        <!-- Menu Items -->
        <nav class="flex-1 px-4 py-6 space-y-2">
          <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gradient-to-r hover:from-rose-50 hover:to-pink-50 transition-all duration-200 group">
            <ion-icon name="home-outline" class="text-xl text-gray-600 group-hover:text-rose-400"></ion-icon>
            <span class="text-gray-700 group-hover:text-rose-400">Home</span>
          </a>
          <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gradient-to-r hover:from-rose-50 hover:to-pink-50 transition-all duration-200 group">
            <ion-icon name="information-circle-outline" class="text-xl text-gray-600 group-hover:text-rose-400"></ion-icon>
            <span class="text-gray-700 group-hover:text-rose-400">About</span>
          </a>
          <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gradient-to-r hover:from-rose-50 hover:to-pink-50 transition-all duration-200 group">
            <ion-icon name="briefcase-outline" class="text-xl text-gray-600 group-hover:text-rose-400"></ion-icon>
            <span class="text-gray-700 group-hover:text-rose-400">Services</span>
          </a>
          <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gradient-to-r hover:from-rose-50 hover:to-pink-50 transition-all duration-200 group">
            <ion-icon name="images-outline" class="text-xl text-gray-600 group-hover:text-rose-400"></ion-icon>
            <span class="text-gray-700 group-hover:text-rose-400">Portfolio</span>
          </a>
          <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gradient-to-r hover:from-rose-50 hover:to-pink-50 transition-all duration-200 group">
            <ion-icon name="mail-outline" class="text-xl text-gray-600 group-hover:text-rose-400"></ion-icon>
            <span class="text-gray-700 group-hover:text-rose-400">Contact</span>
          </a>
        </nav>

        <!-- Footer -->
        <div class="px-4 py-6 border-t border-gray-100">
          <p class="text-sm text-gray-500 text-center">© 2026 Brand</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Content Area -->
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="text-center">
      <h2 class="text-4xl font-bold text-gray-800 mb-4">Hamburger Menu Example</h2>
      <p class="text-gray-600 max-w-2xl mx-auto">
        Click the hamburger icon on mobile view to see the smooth sliding menu animation. 
        The menu features a professional gradient design with smooth transitions.
      </p>
    </div>
  </div>

   body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

Comments (0)

No comments yet. Be the first!