Hamburger Menu Component
A responsive hamburger menu component for blog/content sites, featuring dark mode, grayscale color scheme, and complex interactive elements purely with HTML and Tailwind CSS. Designed for optimal reading and content consumption.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
<!-- Header with Hamburger Menu -->
<header class="bg-white dark:bg-gray-800 shadow-sm">
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
<!-- Logo -->
<a href="#" class="text-2xl font-bold text-gray-900 dark:text-gray-100">BlogName</a>
<!-- Hamburger Icon (Mobile) -->
<div class="lg:hidden relative" x-data="{ open: false }">
<button @click="open = !open" class="text-gray-500 dark:text-gray-400 focus:outline-none focus:text-gray-900 dark:focus:text-gray-100">
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<!-- Mobile Menu Overlay -->
<div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute top-12 right-0 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg py-2 z-50 transform origin-top-right">
<nav class="flex flex-col space-y-1">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Home</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Categories</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Archives</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">About</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Contact</a>
<div class="border-t border-gray-200 dark:border-gray-700 my-2"></div>
<div x-data="{ darkMode: localStorage.theme === 'dark' ? true : false }" class="flex items-center justify-between px-4 py-2">
<span class="text-gray-700 dark:text-gray-300">Dark Mode</span>
<label for="dark-mode-toggle-mobile" class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="dark-mode-toggle-mobile" class="sr-only peer" :checked="darkMode" @change="darkMode = !darkMode; if (darkMode) { document.documentElement.classList.add('dark'); localStorage.theme = 'dark'; } else { document.documentElement.classList.remove('dark'); localStorage.theme = 'light'; }">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
</label>
</div>
</nav>
</div>
</div>
<!-- Desktop Menu -->
<nav class="hidden lg:flex items-center space-x-6">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Categories</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Archives</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Contact</a>
<!-- Dark Mode Toggle (Desktop) -->
<div x-data="{
darkMode: localStorage.theme === 'dark' ? true : false,
init() {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
this.darkMode = true;
} else {
document.documentElement.classList.remove('dark');
this.darkMode = false;
}
}
}" class="flex items-center">
<label for="dark-mode-toggle-desktop" class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="dark-mode-toggle-desktop" class="sr-only peer" :checked="darkMode" @change="darkMode = !darkMode; if (darkMode) { document.documentElement.classList.add('dark'); localStorage.theme = 'dark'; } else { document.documentElement.classList.remove('dark'); localStorage.theme = 'light'; }">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Dark Mode</span>
</label>
</div>
</nav>
</div>
</header>
<!-- Main Content Area (Example) -->
<main class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-extrabold mb-6">Welcome to Our Blog</h1>
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Blog Post Card 1 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/400/250" alt="Blog Post Image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">The Art of Minimalist Design</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Discover how less can be more in web design and daily life, embracing simplicity and function.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
</div>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
</div>
</div>
</article>
<!-- Blog Post Card 2 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/400/251" alt="Blog Post Image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Exploring the Mountains: A Journey</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">An adventurous tale of conquering peaks and finding peace in nature's grandeur.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300 text-sm">Jane Smith</span>
</div>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
</div>
</div>
</article>
<!-- Blog Post Card 3 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/400/252" alt="Blog Post Image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Future of AI: Ethics and Innovation</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Delving into the complex ethical dilemmas and exciting innovations in artificial intelligence.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300 text-sm">Mike Johnson</span>
</div>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
</div>
</div>
</article>
</section>
</main>
<!-- Footer (Example) -->
<footer class="bg-gray-200 dark:bg-gray-800 py-6 mt-8">
<div class="container mx-auto px-4 text-center text-gray-600 dark:text-gray-400">
<p>© 2023 BlogName. All rights reserved.</p>
</div>
</footer>
</div>
<!-- Alpine.js for menu toggle and dark mode persistence -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script>
// Initial dark mode setup (outside Alpine.js for page load)
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>Related Components
Hamburger Menu Component
A skeuomorphic hamburger menu component for a dashboard with a pastel color scheme and minimalist design.
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.
Hamburger Menu Component
A responsive Hamburger Menu component designed in Brutalism style with a Pastel color scheme. Suitable for a portfolio showcasing work or products.