Mobile-first responsive navigation bar with hamburger menu using Tailwind CSS
Quick Answer
Use Tailwind's hidden md:flex classes to show/hide nav links by screen size, and Alpine.js x-data with @click to toggle the mobile hamburger menu open and closed.
1<!-- Requires Alpine.js: <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script> -->
2<nav class="bg-white border-b border-gray-200" x-data="{ open: false }">
3 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
4 <div class="flex justify-between items-center h-16">
5 <a href="/" class="flex items-center gap-2 text-xl font-bold text-gray-900">
6 <span class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white text-sm">S</span>
7 Brand
8 </a>
9 <div class="hidden md:flex items-center gap-8">
10 <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Features</a>
11 <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Pricing</a>
12 <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Blog</a>
13 </div>
14 <div class="hidden md:flex items-center gap-3">
15 <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Log in</a>
16 <a href="#" class="text-sm font-medium bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">Get started</a>
17 </div>
18 <button @click="open = !open" class="md:hidden p-2 rounded-lg text-gray-500 hover:bg-gray-100" aria-label="Toggle menu">
19 <svg x-show="!open" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
20 <svg x-show="open" class="w-5 h-5" 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"/></svg>
21 </button>
22 </div>
23 </div>
24 <div x-show="open" x-transition class="md:hidden border-t border-gray-100 px-4 py-4 space-y-2">
25 <a href="#" class="block text-sm font-medium text-gray-700 hover:text-indigo-600 py-2">Features</a>
26 <a href="#" class="block text-sm font-medium text-gray-700 hover:text-indigo-600 py-2">Pricing</a>
27 <a href="#" class="block text-sm font-medium text-gray-700 hover:text-indigo-600 py-2">Blog</a>
28 <a href="#" class="block text-sm font-medium bg-indigo-600 text-white text-center px-4 py-2 rounded-lg mt-2">Get started</a>
29 </div>
30</nav>A responsive navbar is one of the most frequently needed UI components. This Tailwind CSS navbar uses a mobile-first approach with flex utilities, a hidden mobile menu that toggles via Alpine.js, and smooth transitions. It collapses to a hamburger button on small screens and expands to a full horizontal nav on medium and larger screens.
Add sticky top-0 z-50 to the <nav> element. Pair with bg-white/95 backdrop-blur-sm to keep it semi-transparent as the page scrolls behind it.
Yes. Replace x-data and x-show with a small vanilla JS onClick that toggles a hidden class, or use React/Vue state if you are in a component-based framework.
This free html code snippet for responsive navbar is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this intermediate-level example will help you implement responsive navbar quickly and correctly.
All snippets in the Snippetly library follow html best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses html.
Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.