Tailwind CSS Hamburger Menu Examples

In this section we will create tailwind css hamburger menu, hamburger menu animation, responsive hamburger menu with tailwind , tailwind burger menu icon, example with 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>


Read also

Tailwind CSS Navbar UI Example

Create Simple Responsive Navbar in Tailwind CSS with Alpine js


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>



Example 3

Responsive nav with tailwind css ui hamburger

<nav class="container flex justify-between px-4 py-8 mx-auto bg-white">
  <div>
    <h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
  </div>
  <div class="hidden space-x-8 lg:flex">
    <a href="#">Menu 1</a>
    <a href="#">Menu 2</a>
    <a href="#">Menu 3</a>
    <a href="#">Menu 4</a>
  </div>
  <div class="flex lg:hidden">
    <div class="space-y-2">
      <span class="block w-8 h-0.5 bg-gray-600 animate-pulse"></span>
      <span class="block w-8 h-0.5 bg-gray-600 animate-pulse"></span>
      <span class="block w-8 h-0.5 bg-gray-600 animate-pulse"></span>
    </div>
  </div>
</nav>


Responsive nav menu with tailwind css heroicons hamburger icon

<nav class="container flex justify-between px-4 py-8 mx-auto bg-white">
  <div>
    <h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
  </div>
  <div class="hidden space-x-8 lg:flex">
    <a href="#">Menu 1</a>
    <a href="#">Menu 2</a>
    <a href="#">Menu 3</a>
    <a href="#">Menu 4</a>
  </div>
  <div class="flex lg:hidden">
    <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>
  </div>
</nav>