tailwind css hamburger menu examples

In this section, we'll create a Tailwind CSS hamburger menu with Alpine.js, incorporating animations and responsive design. We'll also include heroicons for the burger menu icon, all while utilizing the versatility of Tailwind CSS.


Example 1

Hamburger menu ui using tailwind css.

v1

<div class="space-y-2">
  <div class="w-8 h-0.5 bg-gray-600"></div>
  <div class="w-8 h-0.5 bg-gray-600"></div>
  <div class="w-8 h-0.5 bg-gray-600"></div>
</div>

or

<div class="space-y-2">
  <span class="block w-8 h-1 bg-gray-600"></span>
  <span class="block w-8 h-1 bg-gray-600"></span>
  <span class="block w-8 h-1 bg-gray-600"></span>
</div>

v2

<div class="p-4 space-y-2 bg-gray-600 rounded shadow">
  <span class="block w-8 h-0.5 bg-gray-100 animate-pulse"></span>
  <span class="block w-8 h-0.5 bg-gray-100 animate-pulse"></span>
  <span class="block w-8 h-0.5 bg-gray-100 animate-pulse"></span>
</div>

v3

<div class="space-y-2">
  <span class="block w-8 h-0.5 bg-gray-600"></span>
  <span class="block w-8 h-0.5 bg-gray-600"></span>
  <span class="block w-5 h-0.5 bg-gray-600"></span>
</div>

v4

<div class="space-y-2">
  <span class="block w-5 h-0.5 bg-gray-600"></span>
  <span class="block w-8 h-0.5 bg-gray-600"></span>
  <span class="block w-8 h-0.5 bg-gray-600"></span>
</div>

v5

<div class="space-y-2">
  <span class="block w-5 h-0.5 bg-gray-600"></span>
  <span class="block w-8 h-0.5 bg-gray-600"></span>
</div>

v6

<div class="space-y-2">
  <span class="block w-8 h-0.5 bg-gray-600"></span>
  <span class="block w-5 h-0.5 bg-gray-600"></span>
</div>
tailwind css hamburger menu

tailwind css hamburger menu


Example 2

Tailwind CSS hamburger menu icon using heroicons.

v1

<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>

v2

<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>

v3

<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
</svg>

v4

<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>

v5

<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
</svg>
tailwindcss hamburger menu icon

tailwindcss hamburger menu icon


Example 3

Building a Responsive Navbar Menu with a Hamburger Icon using Tailwind CSS and Alpine.js.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Responsive Navbar with Hamburger Icon</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
    ></script>
  </head>

  <body>
    <div x-data="{ open: false }" class="bg-white shadow-md">
      <div class="container mx-auto flex justify-between items-center p-4">
        <div class="text-blue-500 font-bold text-xl">Your Logo</div>
        <button @click="open = !open" class="lg:hidden text-blue-500">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-6 h-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            />
          </svg>
        </button>
        <div class="hidden lg:flex">
          <ul class="lg:flex space-x-4">
            <li><a class="text-blue-500" href="#">Home</a></li>
            <li><a class="text-blue-500" href="#">About</a></li>
            <li><a class="text-blue-500" href="#">Services</a></li>
            <li><a class="text-blue-500" href="#">Contact</a></li>
          </ul>
        </div>
      </div>
      <div x-show="open" class="lg:hidden">
        <ul class="bg-white p-4">
          <li><a class="text-blue-500" href="#">Home</a></li>
          <li><a class="text-blue-500" href="#">About</a></li>
          <li><a class="text-blue-500" href="#">Services</a></li>
          <li><a class="text-blue-500" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
tailwind menu icon

tailwind menu icon

Example 4

Creating an Animated Responsive Navbar Menu with a Hamburger Icon Using Tailwind CSS, Alpine.js, and heroicons.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Navbar with Hamburger Icon</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
    ></script>
  </head>

  <body>
    <div x-data="{ open: false }" class="bg-white shadow-md">
      <div class="container mx-auto flex justify-between items-center p-4">
        <div class="text-blue-500 font-bold text-xl">Logo</div>
        <button @click="open = !open" class="lg:hidden text-blue-500">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"
            />
          </svg>
        </button>
        <div class="hidden lg:flex">
          <ul class="lg:flex space-x-4">
            <li><a class="text-blue-500" href="#">Home</a></li>
            <li><a class="text-blue-500" href="#">About</a></li>
            <li><a class="text-blue-500" href="#">Services</a></li>
            <li><a class="text-blue-500" href="#">Contact</a></li>
          </ul>
        </div>
      </div>
      <div
        x-show="open"
        x-transition:enter="transform ease-out duration-300 transition-translate-opacity"
        x-transition:enter-start="translate-y-10 opacity-0"
        x-transition:enter-end="translate-y-0 opacity-100"
        x-transition:leave="transform ease-in duration-300 transition-translate-opacity"
        x-transition:leave-start="translate-y-0 opacity-100"
        x-transition:leave-end="translate-y-10 opacity-0"
        class="lg:hidden"
      >
        <ul class="bg-white p-4">
          <li><a class="text-blue-500" href="#">Home</a></li>
          <li><a class="text-blue-500" href="#">About</a></li>
          <li><a class="text-blue-500" href="#">Services</a></li>
          <li><a class="text-blue-500" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
tailwind responsive hamburger menu

tailwind responsive hamburger menu

Example 5

Designing a Hamburger Menu Icon with Responsive Cross Icon Toggle using Tailwind CSS and Alpine.js.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Navbar with Hamburger Icon</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
    ></script>
  </head>

  <body>
    <div x-data="{ open: false }" class="bg-white shadow-md">
      <div class="container mx-auto flex justify-between items-center p-4">
        <div class="text-blue-500 font-bold text-xl">Logo</div>
        <button @click="open = !open" class="lg:hidden text-blue-500">
          <div class="w-6 h-6 relative">
            <svg
              x-show="!open"
              class="w-6 h-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              />
            </svg>

            <svg
              x-show="open"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </div>
        </button>
        <div class="hidden lg:flex">
          <ul class="lg:flex space-x-4">
            <li><a class="text-blue-500" href="#">Home</a></li>
            <li><a class="text-blue-500" href="#">About</a></li>
            <li><a class="text-blue-500" href="#">Services</a></li>
            <li><a class="text-blue-500" href="#">Contact</a></li>
          </ul>
        </div>
      </div>
      <div
        x-show="open"
        x-transition:enter="transform ease-out duration-300 transition-translate-opacity"
        x-transition:enter-start="translate-y-10 opacity-0"
        x-transition:enter-end="translate-y-0 opacity-100"
        x-transition:leave="transform ease-in duration-300 transition-translate-opacity"
        x-transition:leave-start="translate-y-0 opacity-100"
        x-transition:leave-end="translate-y-10 opacity-0"
        class="lg:hidden"
      >
        <ul class="bg-white p-4">
          <li><a class="text-blue-500" href="#">Home</a></li>
          <li><a class="text-blue-500" href="#">About</a></li>
          <li><a class="text-blue-500" href="#">Services</a></li>
          <li><a class="text-blue-500" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
tailwind toggle hamburger menu

tailwind toggle hamburger menu


See Also

Tailwind CSS Free Digital Agency Landing Page

TailFood – Free Tailwind CSS Restaurant Template

Tailwind CSS Real Estate Template

Tailwind CSS Simple Responsive Landing Page Template

Tailwind CSS Simple Verification Email Template


Read Also

Tailwind CSS 3 FAQ Accordion UI Example

Tailwind CSS 3 Alert Message Example

Tailwind CSS 3 Avatars Example

Tailwind CSS 3 Badges Example

Tailwind CSS 3 Breadcrumb Example

Tailwind CSS Gradient Button Example

Tailwind CSS 3D Button Example

Tailwind CSS Loading Button Example

Tailwind CSS v3 Cards Examples

Tailwind CSS Checkbox Form Examples

Tailwind CSS Dropdowns (Menu) on Hover Example

Tailwind CSS Multiselect Dropdown Example

How to use dark mode toggle switch in Tailwind CSS 3

How to use @apply directive in Tailwind CSS

Tailwind CSS sticky header & fixed navbar example

Tailwind CSS Navbar UI Example

Tailwind CSS 3 Login Page UI Example

Tailwind CSS Login Modal Example

Tailwind CSS Search Examples

Tailwind CSS 3 Overlay Image Example

Tailwind CSS Thank You Page Example

Tailwind CSS Timeline UI Example

Tailwind CSS Responsive Footer Section Example

Tailwind CSS Background Image Header Example