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>
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
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>
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>
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>
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 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 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