Published on August 15, 2025

How to Build a Responsive Navbar with Tailwind CSS

A well-designed navigation bar is the backbone of any modern website. In this guide, we’ll create a beautiful, responsive navbar using Tailwind CSS, Google Fonts, and Ionicons. This navbar will look professional, work on all screen sizes, and feature a smooth mobile menu toggle.

Why Tailwind CSS for Navbars?

Tailwind CSS allows us to create pixel-perfect designs with minimal custom CSS.

Utility-first: Build directly in HTML without switching between files.
Responsive utilities: Easily adapt designs to mobile, tablet, and desktop.
Consistent styling: Pre-defined classes for spacing, colors, and typography.

Features of Our Navbar

✅ Brand Logo on the left
✅ Navigation Links in the center
✅ Sign-in Button and Mobile Menu Icon on the right
✅ Responsive Design for mobile and desktop
✅ Smooth Animation for mobile menu toggle

1. Adding Tailwind, Fonts, and Icons

We’ll include Tailwind via CDN for quick setup, Poppins font from Google Fonts, and Ionicons for our menu icon.

HTML

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Google Fonts: Poppins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Ionicons -->
<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>

2. Complete Navbar Code

Here’s the full HTML structure with Tailwind classes:

HTML

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap"
        rel="stylesheet">
    <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
</head>

<body class="font-[Poppins] bg-gradient-to-t from-[#fbc2eb] to-[#a6c1ee] h-screen">
    <header class="bg-white">
        <nav class="flex justify-between items-center w-[92%]  mx-auto">
            <div>
                <img class="w-16 cursor-pointer" src="https://cdn-icons-png.flaticon.com/512/5968/5968204.png" alt="...">
            </div>
            <div
                class="nav-links duration-500 md:static absolute bg-white md:min-h-fit min-h-[60vh] left-0 top-[-100%] md:w-auto  w-full flex items-center px-5">
                <ul class="flex md:flex-row flex-col md:items-center md:gap-[4vw] gap-8">
                    <li>
                        <a class="hover:text-gray-500" href="#">Products</a>
                    </li>
                    <li>
                        <a class="hover:text-gray-500" href="#">Solution</a>
                    </li>
                    <li>
                        <a class="hover:text-gray-500" href="#">Resource</a>
                    </li>
                    <li>
                        <a class="hover:text-gray-500" href="#">Developers</a>
                    </li>
                    <li>
                        <a class="hover:text-gray-500" href="#">Pricing</a>
                    </li>
                </ul>
            </div>
            <div class="flex items-center gap-6">
                <button class="bg-[#a6c1ee] text-white px-5 py-2 rounded-full hover:bg-[#87acec]">Sign in</button>
                <ion-icon onclick="onToggleMenu(this)" name="menu" class="text-3xl cursor-pointer md:hidden"></ion-icon>
            </div>
    </header>



    <script>
        const navLinks = document.querySelector('.nav-links')
        function onToggleMenu(e){
            e.name = e.name === 'menu' ? 'close' : 'menu'
            navLinks.classList.toggle('top-[9%]')
        }
    </script>
</body>

</html>

3. How It Works

HTML Structure

Logo on the left.
Navigation links hidden on mobile but visible on desktop.
Sign-in button and menu icon on the right.

Tailwind CSS

flex justify-between items-center → Aligns items horizontally.
md:flex-row flex-col → Stacks links vertically on mobile, horizontally on desktop.
bg-gradient-to-t → Adds a smooth background gradient to the body.
duration-500 → Smooth slide animation when opening mobile menu.

JavaScript

The onToggleMenu() function switches the menu icon between menu and close.
It toggles the class top-[9%] to slide the menu into view.

4. Final Output

Desktop View:
✅ Inline navigation links
✅ Sign-in button
✅ No mobile menu icon
Mobile View:
✅ Hamburger menu icon
✅ Links slide down when clicked
✅ Close icon replaces hamburger when open

5. Possible Enhancements

To make it even better, you could:

Add active link highlighting.
Include dropdown menus.
Make it sticky so it stays at the top on scroll.
Add ARIA attributes for accessibility.

Conclusion

With just a few lines of HTML, Tailwind CSS classes, and a small JavaScript function, we’ve built a fully functional responsive navbar that looks modern and professional.

This approach works great for landing pages, portfolios, or SaaS dashboards and can be easily extended for more complex navigation needs.