Tailwind CSS Hamburger Menu Examples

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.

View Demo

Example 1

Create a hamburger menu UI using Tailwind CSS.

Tailwind CSS
<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>
<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>
<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>
<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>
<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>
<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>
<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>
hamburger menu

Example 2

Implement a hamburger menu icon using Tailwind CSS and Heroicons.

Tailwind CSS
<div class="flex gap-4">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-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 xmlns="http://www.w3.org/2000/svg" class="h-6 w-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>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-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>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-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>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-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>
</div>
hamburger menu icon

Example 3

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

Tailwind CSS & AlpineJS
<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>
responsive menu tailwind & apinejs

Example 4

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

Tailwind CSS & AlpineJS
<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>

Example 5

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

Tailwind CSS & AlpineJS
<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>
toggle x hamburger menu
Tags
saim ansari
saim ansari

I'm Saim Ansari, a full-stack developer with 4+ years of hands-on experience who thrives on building web applications that leave a lasting impression. When it comes to tech, I'm particularly adept at Laravel, React, Tailwind CSS, and the Tall Stack