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 =
</ script >
< script src =
</ 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 >
|
Output: