How to create a Responsive Navigation Bar in Tailwind CSS ?

Last Updated : 09 Feb, 2024

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.

Example: Illustration of navigation bar with Collapses in Tailwind CSS.

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/ionicons@4.5.10-0/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>