Building a Mobile-First Navbar with Tailwind

1. Basic Structure

Here’s a simple navbar layout that is optimized for mobile first, then enhanced for desktop:

<nav class="bg-white shadow-md">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
        <div class="text-xl font-bold">Brand</div>
        <div class="md:hidden">
            <button id="menu-toggle" class="text-gray-600">☰</button>
        </div>
        <ul id="menu" class="hidden md:flex space-x-6">
            <li><a href="#" class="hover:text-blue-600">Home</a></li>
            <li><a href="#" class="hover:text-blue-600">About</a></li>
            <li><a href="#" class="hover:text-blue-600">Contact</a></li>
        </ul>
    </div>
</nav>
            

2. Toggle Menu on Mobile

Use JavaScript or Alpine.js to toggle the visibility of the mobile menu:

// JS example
document.getElementById('menu-toggle').addEventListener('click', function () {
    const menu = document.getElementById('menu');
    menu.classList.toggle('hidden');
});
            

3. Alpine.js Version (Optional)

For a more reactive setup without external JS:

<nav x-data="{ open: false }" class="bg-white shadow-md">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
        <div class="text-xl font-bold">Brand</div>
        <button @click="open = !open" class="md:hidden text-gray-600">☰</button>
        <ul :class="{ 'hidden': !open }" class="md:flex space-x-6 hidden md:block">
            <li><a href="#" class="hover:text-blue-600">Home</a></li>
            <li><a href="#" class="hover:text-blue-600">About</a></li>
            <li><a href="#" class="hover:text-blue-600">Contact</a></li>
        </ul>
    </div>
</nav>
            

4. Best Practices

• Always hide the menu on mobile by default and use JavaScript to show it.
• Use mobile-first classes (md:flex, md:hidden) to enhance progressively.
• Ensure your toggle button is keyboard accessible for better accessibility.