Tailwind CSS Guide
Tailwind CSS Navbar Tutorial
Build a responsive navbar with a mobile hamburger menu using Flexbox.
Last updated: October 2026 · Tested on Tailwind v4.0
Quick answer: Use flex items-center justify-between on the navbar container. Add hidden md:flex to the desktop menu and md:hidden to the mobile button. Toggle the mobile menu by adding or removing the hidden class on the mobile menu container.
The Basic Navbar Structure
Every navbar starts with a flex container that spreads its children:
<nav class="bg-slate-900 border-b border-slate-800">
<div class="flex items-center justify-between px-6 py-4 max-w-6xl mx-auto">
<a href="/" class="text-xl font-bold text-white">Logo</a>
<ul class="hidden md:flex gap-6 text-slate-300">
<li><a href="/" class="hover:text-white">Home</a></li>
<li><a href="/about" class="hover:text-white">About</a></li>
<li><a href="/contact" class="hover:text-white">Contact</a></li>
</ul>
</div>
</nav>flex items-center justify-between— logo on the left, links on the right.hidden md:flex— hide the menu on mobile, show as flex on desktop.
Add the Mobile Hamburger Button
Add this button inside the navbar container, after the desktop menu:
<button id="menu-toggle" class="md:hidden text-white text-2xl" aria-label="Toggle menu">
☰
</button>md:hidden hides the button on desktop. On mobile, it's the only way to open the menu.
Add the Mobile Menu
Add this below the flex container, inside the nav:
<div id="mobile-menu" class="hidden md:hidden px-6 pb-4">
<ul class="flex flex-col gap-4 text-slate-300">
<li><a href="/" class="hover:text-white">Home</a></li>
<li><a href="/about" class="hover:text-white">About</a></li>
<li><a href="/contact" class="hover:text-white">Contact</a></li>
</ul>
</div>The hidden class starts it closed. JavaScript toggles it open.
Add the JavaScript Toggle
<script>
const toggle = document.getElementById('menu-toggle');
const menu = document.getElementById('mobile-menu');
toggle.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>That's it. One listener, one class toggle. Clean and simple.
Make It Sticky
To keep the navbar visible while scrolling:
<nav class="sticky top-0 z-50 bg-slate-900 border-b border-slate-800">sticky top-0— sticks to the top when scrolling.z-50— keeps it above other content.
💡 Sticky vs Fixed: Use sticky for most cases — it stays in the document flow, so no content jumps when you scroll. Use fixed only if you want the navbar overlaying content (then add padding to the body).
Add a Dropdown Menu
For links that have a submenu, use the group pattern:
<li class="relative group">
<button class="flex items-center gap-1 hover:text-white">
Products <span class="text-xs">▾</span>
</button>
<ul class="absolute top-full left-0 mt-2 hidden group-hover:block bg-slate-800 rounded-lg p-2 min-w-[160px]">
<li><a href="/a" class="block px-4 py-2 hover:bg-slate-700 rounded">Product A</a></li>
<li><a href="/b" class="block px-4 py-2 hover:bg-slate-700 rounded">Product B</a></li>
</ul>
</li>group-hover:block shows the dropdown when the parent group is hovered. No JavaScript required.
📋 The Complete Working Navbar
Copy this into any project. It includes responsive layout, mobile menu, and sticky positioning:
<nav class="sticky top-0 z-50 bg-slate-900 border-b border-slate-800">
<div class="flex items-center justify-between px-6 py-4 max-w-6xl mx-auto">
<a href="/" class="text-xl font-bold text-white">Logo</a>
<!-- Desktop menu -->
<ul class="hidden md:flex gap-6 text-slate-300">
<li><a href="/" class="hover:text-white transition">Home</a></li>
<li><a href="/about" class="hover:text-white transition">About</a></li>
<li><a href="/contact" class="hover:text-white transition">Contact</a></li>
</ul>
<!-- Mobile button -->
<button id="menu-toggle" class="md:hidden text-white text-2xl" aria-label="Toggle menu">
☰
</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden px-6 pb-4">
<ul class="flex flex-col gap-4 text-slate-300">
<li><a href="/" class="hover:text-white">Home</a></li>
<li><a href="/about" class="hover:text-white">About</a></li>
<li><a href="/contact" class="hover:text-white">Contact</a></li>
</ul>
</div>
</nav>
<script>
const toggle = document.getElementById('menu-toggle');
const menu = document.getElementById('mobile-menu');
toggle.addEventListener('click', () => menu.classList.toggle('hidden'));
</script>🛡️ Best Practices
- Use
sticky top-0instead offixedfor most navbars. - Add
z-50or higher to keep the navbar above hero sections and modals. - Use semantic HTML:
<nav>,<ul>,<li>. - Add
aria-labelto the hamburger button for accessibility. - Test mobile menu on real devices — pointer events differ from desktop.
- Cap the container with
max-w-6xl mx-autofor large screens.
Common mistake: Forgetting relative on the parent of a dropdown. Without it, the dropdown's absolute positioning will escape the navbar.
❓ Frequently Asked Questions
How do I make a navbar with Tailwind CSS?
Use flex items-center justify-between for the layout. Add hidden md:flex for the desktop menu and md:hidden for the mobile button. Toggle the mobile menu with JavaScript.
How do I make a sticky navbar in Tailwind?
Add sticky top-0 z-50 to the navbar element. The sticky class makes it stick to the top, and z-50 ensures it appears above other content.
How do I build a mobile hamburger menu in Tailwind?
Show a button with md:hidden, then use JavaScript to toggle a hidden class on the mobile menu container. The menu itself uses flex flex-col md:hidden.
Should I use fixed or sticky for a navbar?
Use sticky top-0 for most cases. It stays in the document flow so no layout shift occurs. Use fixed only if you want the navbar to overlay content always.
How do I add a dropdown menu to a Tailwind navbar?
Use group and group-hover utilities to show the dropdown on hover. Or use JavaScript for click-based dropdowns. Wrap the parent item in a relative group and the dropdown in absolute hidden group-hover:block.