How to create a Responsive Navigation Bar in Tailwind CSS ?
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
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" > Beginner </ 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 > |
Output:
Contact Us