Hamburger Menu

Skeuomorphic Hamburger Menu

A responsive Hamburger Menu component designed with skeuomorphic elements, vibrant colors, and dark theme support for e-commerce sites.

Open Preview

                <div class="flex items-center justify-between p-4 bg-blue-500 dark:bg-blue-800 rounded-lg shadow-lg">
    <div class="flex items-center space-x-2">
        <img src="https://picsum.photos/30" alt="Logo" class="h-8 w-8 rounded-full border-2 border-white">
        <h1 class="text-white text-lg font-bold">ShopEasy</h1>
    </div>
    <button class="text-white focus:outline-none">
        <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>
    </button>
</div>

<div class="hidden md:flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-2">
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
</div>

<div class="md:hidden">
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mt-2 space-y-2">
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
    </div>
</div>

Hamburger Menu Component

A responsive Hamburger Menu Component designed in Material Design style with dark theme support, suitable for dashboard navigation.

Open Preview

                <div class="bg-gray-800 text-white h-screen flex flex-col">
    <div class="flex justify-between items-center p-5">
        <div class="text-2xl font-bold">Dashboard</div>
        <button id="menu-toggle" class="focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" 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>
        </button>
    </div>
    <div id="menu" class="hidden bg-gray-700 p-4 rounded-lg shadow-lg">
        <ul class="space-y-2">
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Home</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Profile</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Settings</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Logout</a></li>
        </ul>
    </div>
    <div class="flex-1 p-5">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=1" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 1</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=2" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 2</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=3" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 3</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
        </div>
    </div>
</div>

A complex responsive hamburger menu component with glassmorphism design, featuring a frosted glass-like translucent effect, suitable for a portfolio showcasing work or products. It includes a dark theme support and utilizes Tailwind CSS for styling.

Open Preview

                <div class="relative flex flex-col items-center bg-gray-800 min-h-screen p-4 dark:bg-gray-900">
    <button class="hamburger flex items-center justify-center w-10 h-10 bg-white bg-opacity-30 backdrop-blur-md rounded-full shadow-lg hover:bg-opacity-50 dark:bg-gray-700 dark:hover:bg-opacity-50">
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
    </button>
    <nav class="absolute left-0 top-12 w-64 bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg transition-transform duration-300 ease-in-out transform -translate-x-full group-hover:translate-x-0 dark:bg-gray-700">
        <div class="flex flex-col p-4">
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Home</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">About</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Portfolio</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Contact</a>
        </div>
    </nav>
    <div class="mt-5 w-full flex justify-center">
        <img src="https://picsum.photos/200/300" alt="Portfolio Item" class="rounded-lg shadow-lg">
    </div>
    <div class="mt-5 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white bg-opacity-90 shadow-lg">
        <p class="ml-2 text-white">John Doe</p>
    </div>
</div>

Hamburger Menu Component

A responsive Hamburger Menu Component designed with a 3D style, suitable for dashboard purposes. It incorporates a triadic color scheme and has a complex interface with interactive elements, supporting both light and dark themes.

Open Preview

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative w-16 h-16 mt-8 cursor-pointer group">
        <div class="absolute inset-0 bg-blue-500 rounded-lg transform transition-transform duration-200 ease-in-out group-hover:scale-105 dark:bg-blue-400"></div>
        <div class="bg-red-500 w-16 h-2 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-red-400"></div>
        <div class="bg-yellow-500 w-16 h-2 mt-1 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-yellow-400"></div>
    </div>
    <nav class="absolute top-16 left-0 w-64 bg-white dark:bg-gray-800 shadow-lg rounded-lg transition-all duration-300 transform -translate-y-10 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
        <ul class="py-2">
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Dashboard</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Reports</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Analytics</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/women/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Settings</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/30.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Profile</span>
            </li>
        </ul>
    </nav>
</div>

Hamburger Menu Component

A responsive hamburger menu component designed for dashboard use, styled in a 3D design with a grayscale color scheme, suitable for both light and dark themes.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-800 transition duration-300 ease-in-out p-4 rounded-lg shadow-lg transform hover:scale-105">
    <div class="flex justify-between items-center">
        <div class="text-lg font-bold text-gray-800 dark:text-white">Dashboard</div>
        <button class="text-gray-800 dark:text-white focus:outline-none hover:text-gray-600 dark:hover:text-gray-400">
            <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>
        </button>
    </div>
    <nav class="mt-4">
        <ul class="space-y-2">
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Home</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Profile</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Settings</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Logout</a>
            </li>
        </ul>
    </nav>
</div>

Hamburger Menu Component

A skeuomorphic hamburger menu component for a dashboard with a pastel color scheme and minimalist design.

Open Preview

                <div class="flex items-center justify-between p-4 bg-pastel-light dark:bg-pastel-dark rounded-lg shadow-lg">
    <div class="flex items-center">
        <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
    </div>
    <button class="flex items-center p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
        <div class="hamburger"> 
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200"></div>
        </div>
    </button>
</div>

<div class="hidden lg:block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg mt-2">
    <ul class="space-y-2">
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">User Profile</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Settings</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Logout</span>
        </li>
    </ul>
</div>

<style>
.hamburger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

Hamburger Menu Component

A responsive Hamburger Menu Component designed with Brutalism style using Tailwind CSS, featuring dark mode support and placeholders for images and avatars.

Open Preview

                <div class="flex items-center justify-between p-5 bg-gray-800 text-white">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-3">
        <span class="text-2xl font-bold">Brutalism Menu</span>
    </div>
    <div class="lg:hidden">
        <button id="menu-toggle" class="flex items-center justify-center h-10 w-10 rounded-md bg-gray-600 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-200">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" /></svg>
        </button>
    </div>
    <div class="hidden lg:flex space-x-4">
        <a href="#" class="font-semibold hover:text-gray-400">Home</a>
        <a href="#" class="font-semibold hover:text-gray-400">About</a>
        <a href="#" class="font-semibold hover:text-gray-400">Services</a>
        <a href="#" class="font-semibold hover:text-gray-400">Contact</a>
    </div>
</div>

<div id="menu" class="lg:hidden bg-gray-900 text-white fixed top-0 left-0 w-full h-full z-50 hidden">
    <div class="flex flex-col items-center justify-center h-full space-y-4">
        <a href="#" class="text-lg font-bold hover:text-gray-400">Home</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">About</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">Services</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">Contact</a>
        <button class="mt-6 h-10 w-10 bg-red-600 hover:bg-red-500 rounded-full">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
        </button>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-gray-800 { background-color: #1a1a1a; }
    .bg-gray-900 { background-color: #121212; }
}
</style>

Hamburger Menu Component

A responsive hamburger menu component with brutalist design, featuring high contrast, bold styles, and dark mode support.

Open Preview

                <div class="relative bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <button class="flex items-center justify-center w-10 h-10 text-black dark:text-white hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md transition-all">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
        </svg>
    </button>
    <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 transition-opacity duration-300 ease-in-out transform scale-0 origin-top-right">
        <div class="flex flex-col p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10 mb-2">
            <h3 class="text-lg font-bold text-black dark:text-white">Menu Title</h3>
            <ul class="space-y-2">
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 1</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 2</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Hamburger Menu Component 19

A skeletal Hamburger Menu Component designed in skeuomorphic style, mimicking real-world elements. It is responsive and includes dark mode support using Tailwind CSS.

Open Preview

                <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden w-64">
  <div class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 p-4 rounded-t-lg">
    <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Menu</h1>
    <button class="focus:outline-none">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-gray-200" 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>
    </button>
  </div>
  <div class="p-4 space-y-4">
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Home</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">About</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Services</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Contact</span>
    </div>
  </div>
  <div class="absolute bottom-0 left-0 right-0 bg-gray-300 dark:bg-gray-700 p-4 rounded-b-lg">
    <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Log Out</a>
  </div>
</div>

Categories