Creating the Navbar Container
Start by building a flex container for your navbar. This helps align logo, links, and buttons in a single horizontal row.
Example:
<nav class=“bg-gray-900 text-white p-4”>
<div class=“flex justify-between items-center”>
<h1 class=“text-xl font-bold”>MyLogo</h1>
</div>
</nav>
Adding Navigation Links
Next, add navigation links and align them using flex utilities. You can use gap-* for spacing between links.
Example:
<div class=“flex gap-6”>
<a href=“#” class=“hover:text-blue-400”>Home</a>
<a href=“#” class=“hover:text-blue-400”>About</a>
<a href=“#” class=“hover:text-blue-400”>Contact</a>
</div>
Aligning Logo and Menu
Use justify-between to place the logo on the left and menu items on the right. This creates a balanced navbar layout.
Example:
<div class=“flex justify-between items-center”>
<h1 class=“text-xl font-bold”>Logo</h1>
<div class=“flex gap-6”>
<a href=“#”>Home</a>
<a href=“#”>Services</a>
</div>
</div>
Adding Responsive Menu (Mobile View)
For smaller screens, hide the menu and show a hamburger icon. Tailwind’s responsive utilities make this easy.
Example:
<button class=“md:hidden”>☰</button>
<div class=“hidden md:flex gap-6”>
<a href=“#”>Home</a>
<a href=“#”>About</a>
</div>
Styling & Enhancements
Enhance your navbar with background colors, hover effects, shadows, and transitions for a modern look.
Example:
<nav class=“bg-white shadow-md p-4”>
<div class=“flex justify-between items-center”>
<h1 class=“text-lg font-semibold”>Brand</h1>
<div class=“flex gap-4”>
<a class=“hover:text-blue-500 transition”>Home</a>
<a class=“hover:text-blue-500 transition”>Blog</a>
</div>
</div>
</nav>
