MobileMenu

Mobile Menu + AlpineJs

This tailwind example is contributed by Maxim, on 09-Feb-2024. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 5.6k 14

<script src="https://unpkg.com/alpinejs"></script>
<div x-data="{ showModal: false }" x-on:keydown.window.escape="showModal = false">
	<div class="w-40 mx-auto">
		<button x-on:click="showModal = !showModal" class="inline-flex gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">
			<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 9h16.5m-16.5 6.75h16.5" />
			</svg>
		</button>
	</div>
	<div x-cloak x-show="showModal" x-transition.opacity class="fixed inset-0 z-40 bg-black bg-opacity-50"></div>
	<div x-cloak x-show="showModal" x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="fixed bg-white left-0 top-0 bottom-0 z-50 w-10/12">
		<div class="overflow-y-auto h-full">
			
			<div class="relative">
				<div class="flex justify-between items-center mx-4 mt-4">
					<h2 class="text-2xl font-extrabold text-gray-900">Menu</h2>
					<button type="button" x-on:click="showModal = false" class="rounded-lg text-gray-700 transition-all hover:bg-gray-100 bg-gray-200 p-1">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-6 w-6">
							<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
						</svg>
					</button>
				</div>
				<hr class="my-4 h-px border-0 bg-gray-300" />
				<h2 class="text-xl font-bold text-gray-900 px-4 py-2">Categories</h2>
				<div class="grid gap-4 grid-cols-3 lg:grid-cols-6 p-4">
					<div class="text-center text-gray-500">
						<a href="http://lqrs.uk/wine/">
							<img class="mx-auto mb-4 w-auto h-auto object-cover object-center rounded-full" src='http://lqrs.uk/site/assets/files/1042/wines.128x128.jpg' alt='' />
							<h2 class="mb-1 font-medium text-gray-900">Wines</h2>
						</a>
					</div>
					<div class="text-center text-gray-500">
						<a href="http://lqrs.uk/gin/">
							<img class="mx-auto mb-4 w-auto h-auto object-cover object-center rounded-full" src='http://lqrs.uk/site/assets/files/1045/gin.128x128.jpg' alt='' />
							<h2 class="mb-1 font-medium text-gray-900">Gin</h2>
						</a>
					</div>
					<div class="text-center text-gray-500">
						<a href="http://lqrs.uk/whiskey/">
							<img class="mx-auto mb-4 w-auto h-auto object-cover object-center rounded-full" src='http://lqrs.uk/site/assets/files/1046/whiskey.128x128.jpg' alt='' />
							<h2 class="mb-1 font-medium text-gray-900">Whiskey</h2>
						</a>
					</div>
					<div class="text-center text-gray-500">
						<a href="http://lqrs.uk/vodka/">
							<img class="mx-auto mb-4 w-auto h-auto object-cover object-center rounded-full" src='http://lqrs.uk/site/assets/files/1047/vodka.128x128.jpg' alt='' />
							<h2 class="mb-1 font-medium text-gray-900">Vodka</h2>
						</a>
					</div>
					<div class="text-center text-gray-500">
						<a href="http://lqrs.uk/rum/">
							<img class="mx-auto mb-4 w-auto h-auto object-cover object-center rounded-full" src='http://lqrs.uk/site/assets/files/1048/rum.128x128.jpg' alt='' />
							<h2 class="mb-1 font-medium text-gray-900">Rum</h2>
						</a>
					</div>
					<div class="text-center text-gray-500">
						<a href="http://lqrs.uk/tequila-mezcal/">
							<img class="mx-auto mb-4 w-auto h-auto object-cover object-center rounded-full" src='http://lqrs.uk/site/assets/files/1053/tequila.128x128.jpg' alt='' />
							<h2 class="mb-1 font-medium text-gray-900">Tequila &amp; Mezcal</h2>
						</a>
					</div>
					<div class="text-center text-gray-500">
						<a href="http://lqrs.uk/brandy-cognac/">
							<img class="mx-auto mb-4 w-auto h-auto object-cover object-center rounded-full" src='http://lqrs.uk/site/assets/files/1054/cognac.128x128.jpg' alt='' />
							<h2 class="mb-1 font-medium text-gray-900">Brandy &amp; Cognac</h2>
						</a>
					</div>
					<div class="text-center text-gray-500">
						<a href="http://lqrs.uk/cordials-liqueurs/">
							<img class="mx-auto mb-4 w-auto h-auto object-cover object-center rounded-full" src='http://lqrs.uk/site/assets/files/1055/cordials.128x128.jpg' alt='' />
							<h2 class="mb-1 font-medium text-gray-900">Cordials &amp; Liqueurs</h2>
						</a>
					</div>
				</div>
				<hr class="my-4 h-px border-0 bg-gray-300" />
				<h2 class="text-xl font-bold text-gray-900 px-4 py-2">Pages</h2>
				<ul class="divide-y divide-gray-200">
					<li class="p-4 hover:bg-gray-100">
						<a href="http://lqrs.uk/collections/" class="block text-gray-500">Collections</a>
					</li>
					<li class="p-4 hover:bg-gray-100">
						<a href="http://lqrs.uk/deals/" class="block text-gray-500">Deals</a>
					</li>
					<li class="p-4 hover:bg-gray-100">
						<a href="http://lqrs.uk/glossary/" class="block text-gray-500">Glossary</a>
					</li>
					<li class="p-4 hover:bg-gray-100">
						<a href="http://lqrs.uk/recipes/" class="block text-gray-500">Recipes</a>
					</li>
					<li class="p-4 hover:bg-gray-100">
						<a href="http://lqrs.uk/brands/" class="block text-gray-500">Brands</a>
					</li>
				</ul>
			</div>
			
		</div>
	</div>
</div>

Related Examples

Hamburger menu button with open/close animation
Open and close animation onclick requires alpineJs

Krishna Gudpalle

4 years ago

21.2k
Hamburger menu button with hover effect

_Amar_

3 years ago

18.4k
Nav Bar
Animated Mobile Dropdown menu

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.2k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Rajesh Pandey

1 year ago

1.7k
Creative Agency Navbar with Fullscreen Mobile Menu & Animated CTA
A bold, editorial-style navigation bar designed for creative agencies, design studios, architecture firms, and portfolio websites. Built with pure HTML and Tailwind CSS, it features a minimalist branding system, fullscreen mobile navigation, animated call-to-action button, responsive layout, and modern typography inspired by premium digital agencies.

JUGENDRA GANGWAR

4 months ago

382
Active Beauty Main Page

Maxim

1 year ago

1.9k
Material 3 Menu [Light]
A menu that conforms to Google's Material 3 design guidelines

Nick Girga

1 year ago

1k
Landing page

Maxim

1 year ago

2.8k
Ecommerce Navbar with products, Expanding Search & Mobile sidebar filter
luxury ecommerce navigation bar crafted with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

4 months ago

249
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

KULDEEP

1 year ago

2k
Collapsible Sidebar Menu

Rajesh Maheshwari

1 year ago

3.6k
vscode a la omerlinks
vscode a la omerlinks

Omer fils ELENGA

11 months ago

679