How to create a Responsive Navigation Bar in Tailwind CSS ?

How to create a Responsive Navigation Bar in Tailwind CSS ?

Last Updated : 10 Jun, 2025

A Responsive Navigation Bar with collapsible elements is a crucial component of modern web design, allowing users to navigate seamlessly across various screen sizes. In this article, we'll explore how to implement such a navigation bar using Tailwind CSS, a utility-first CSS framework that enables rapid development and easy customization.

Preview

Screenshot-2024-02-02-113237

Approach

Set up HTML5 structure with necessary meta tags, linking Tailwind CSS, and Ionicons scripts.
Create a header with a green background, flex container, and navigation links.
Style navigation links using Tailwind CSS for a clean and responsive design.
Add a toggle button with an Ionicon "menu" icon for mobile responsiveness.
Implement a JavaScript function to toggle the menu's visibility on button click.
Utilize Tailwind CSS classes for responsiveness, ensuring the navigation bar adapts to different screen sizes.

Source Code

We recommend directly jump to the source code, you should give a try first.

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>
    <script src=
"https://unpkg.com/[email protected]/dist/ionicons.js">
      </script>
</head>

<body>
    <header class="bg-green-500 py-4">
        <nav class="flex justify-between 
                    items-center w-[92%]  mx-auto">
            <div class="w-16 font-bold text-green-700">
                Geeks
            </div>
            <div class="nav-links duration-500 md:static 
                        absolute 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="#">Home</a>
                    </li>
                    <li>
                        <a class="hover:text-gray-500" href="#">About</a>
                    </li>
                    <li>
                        <a class="hover:text-gray-500" href="#">Contact Support</a>
                    </li>
                    <li>
                        <a class="hover:text-gray-500" href="#">Courses</a>
                    </li>
                    <li>
                        <a class="hover:text-gray-500" href="#">Pricing</a>
                    </li>
                </ul>
            </div>
            <div class="flex items-center gap-6">
                <ion-icon onclick="onToggleMenu(this)" 
                          name="menu" class="text-3xl cursor-pointer 
                                             md:hidden text-white">
                  </ion-icon>
            </div>
        </nav>
    </header>
    <script>
        const navLinks = document.querySelector('.nav-links')
        function onToggleMenu(e) {
            e.name = e.name === 'menu' ? 'close' : 'menu'
            navLinks.classList.toggle('top-[6%]')
        }
    </script>
</body>

</html>

How to create a Responsive Navigation Bar in Tailwind CSS ?

B

bishalpaul34

Improve

Article Tags :

Similar Reads

How to Create a Navigation Bar with Icons in Tailwind CSS ?

A navigation bar, commonly known as a nav bar, serves as a fundamental component of user interface design, facilitating seamless navigation across a website or application. Using the icons in the navigation bar gains a distinctive advantage in visual communication. Icons streamline navigation by usi

How to make a Split Navigation Bar in Tailwind CSS ?

Split Navigation Bars in Tailwind CSS implement the different classes that help to distribute the content across the header of a webpage, providing a visually balanced layout. By separating navigation items into distinct sections, it becomes easier for users to identify and access different parts of

How to Create a Responsive Navigation Bar with Dropdown?

Dropdowns in navigation bars are used to organize and display a variety of menu options within a limited screen size. Dropdown allow users to access multiple pages or sections of a website without hampering the interface of a website. We will see how to create a responsive navigation bar with a drop

Create a Responsive Image Carousel in Tailwind CSS

Image Carousel is a UI element that acts like a slideshow by cycling through different images. You can easily design a Carousel in Tailwind CSS by using anchor tags along with proper width, height, and overflow properties. The Carousel can also be made responsive using the Tailwind responsive utilit

How to create a split navigation bar using CSS ?

The article will demonstrate how to create a split navigation bar using CSS. There are two ways to make the split navigation bar these are with the help of flexbox properties and CSS position property. A split navigation bar is a popular layout where navigation links are divided into two sections. I