navmobileintermediate
Mobile Menu
A full-screen mobile menu overlay with large navigation links and a close button.
Preview
Brand
<div class="fixed inset-0 bg-gray-900 z-50 flex flex-col px-6 py-8">
<div class="flex justify-between items-center mb-12">
<span class="text-xl font-bold text-white">Brand</span>
<button class="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<nav class="flex flex-col gap-6">
<a href="#" class="text-3xl font-bold text-white hover:text-indigo-400 transition-colors">Home</a>
<a href="#" class="text-3xl font-bold text-white hover:text-indigo-400 transition-colors">Features</a>
<a href="#" class="text-3xl font-bold text-white hover:text-indigo-400 transition-colors">Pricing</a>
<a href="#" class="text-3xl font-bold text-white hover:text-indigo-400 transition-colors">About</a>
<a href="#" class="text-3xl font-bold text-white hover:text-indigo-400 transition-colors">Contact</a>
</nav>
<div class="mt-auto">
<a href="#" class="block w-full py-4 bg-indigo-600 text-white text-center font-bold rounded-xl hover:bg-indigo-700 transition-colors">Sign Up Free</a>
</div>
</div>Color Breakdown
Background
bg-gray-900
#111827
Links
text-white
#ffffff
Link Hover
hover:text-indigo-400
#818cf8
Close Icon
text-gray-400
#9ca3af
CTA Button
bg-indigo-600
#4f46e5
Use Cases
Mobile website navigationApp drawer menusResponsive sites
Browser Support
All modern browsers.
Related Recipes
Build Your Own Color Recipe
Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.
Explore ToolsFrequently Asked Questions
How do I animate the menu opening?▼
Add translate-x-full by default and translate-x-0 when open, with transition-transform duration-300 for a slide-in effect.