Home
KULDEEP
Tailwind CSS Navbar

Tailwind CSS Navbar

Logo on the left.
Main menu with a mega menu under "Services".
Responsive design with a hamburger menu for mobile devices.
Mega menu appears on hover for desktop and toggles on click for mobile.

This tailwind example is contributed by KULDEEP, on 20-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Menu Other Navbar

Author KULDEEP

Fork Fullscreen

<nav class="bg-white shadow-lg">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      
      
      <div class="flex-shrink-0">
        <a href="#" class="flex items-center space-x-2">
          
          <img src="https://img.freepik.com/premium-vector/k-word-logo-logo-design_622874-26.jpg?w=740" alt="Logo" class="h-10 w-10 rounded-full object-cover" />
          <span class="font-bold text-xl text-gray-800"> Brand Name </span>
        </a>
      </div>
      
      
      <div class="hidden md:flex space-x-8">
        
        <a href="#" class="text-gray-700 hover:text-blue-600 font-semibold">Home</a>
        
        
        <div class="relative group">
          <button class="flex items-center space-x-2 focus:outline-none text-gray-700 hover:text-blue-600 font-semibold">
            <span>Services</span>
            
            <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
              <path d="M5.25 7.5L10 12.25L14.75 7.5H5.25Z" />
            </svg>
          </button>
          
          
          <div class="absolute left-0 top-full mt-2 w-screen max-w-6xl bg-white shadow-xl border border-gray-200 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-50">
            <div class="grid grid-cols-4 gap-6 p-6">
              
              <div>
                <h3 class="text-lg font-semibold mb-2 text-gray-800">Web Development</h3>
                <ul class="space-y-2 text-gray-600">
                  <li><a href="#" class="hover:text-blue-600">Frontend</a></li>
                  <li><a href="#" class="hover:text-blue-600">Backend</a></li>
                  <li><a href="#" class="hover:text-blue-600">Full Stack</a></li>
                  <li><a href="#" class="hover:text-blue-600">CMS</a></li>
                </ul>
              </div>
              
              <div>
                <h3 class="text-lg font-semibold mb-2 text-gray-800">Design</h3>
                <ul class="space-y-2 text-gray-600">
                  <li><a href="#" class="hover:text-blue-600">UI/UX</a></li>
                  <li><a href="#" class="hover:text-blue-600">Graphic Design</a></li>
                  <li><a href="#" class="hover:text-blue-600">Branding</a></li>
                  <li><a href="#" class="hover:text-blue-600">Animation</a></li>
                </ul>
              </div>
              
              <div>
                <h3 class="text-lg font-semibold mb-2 text-gray-800">Marketing</h3>
                <ul class="space-y-2 text-gray-600">
                  <li><a href="#" class="hover:text-blue-600">SEO</a></li>
                  <li><a href="#" class="hover:text-blue-600">Content Marketing</a></li>
                  <li><a href="#" class="hover:text-blue-600">Social Media</a></li>
                  <li><a href="#" class="hover:text-blue-600">Email Campaigns</a></li>
                </ul>
              </div>
              
              <div>
                <h3 class="text-lg font-semibold mb-2 text-gray-800">Consulting</h3>
                <ul class="space-y-2 text-gray-600">
                  <li><a href="#" class="hover:text-blue-600">Business Strategy</a></li>
                  <li><a href="#" class="hover:text-blue-600">Technology Consulting</a></li>
                  <li><a href="#" class="hover:text-blue-600">Analytics</a></li>
                  <li><a href="#" class="hover:text-blue-600">Support</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        
        
        <a href="#" class="text-gray-700 hover:text-blue-600 font-semibold">About</a>
        
        <a href="#" class="text-gray-700 hover:text-blue-600 font-semibold">Contact</a>
      </div>
      
      
      <div class="md:hidden">
        <button id="mobile-menu-btn" class="focus:outline-none">
          
          <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
      
    </div>
  </div>

<div class="md:hidden hidden" id="mobile-menu">
    <div class="px-4 pt-2 pb-4 space-y-2 bg-white border-t border-gray-200">
      <a href="#" class="block text-gray-700 hover:text-blue-600 font-semibold">Home</a>
      
      
      <div class="border-t border-gray-200 pt-2">
        <button class="w-full flex items-center justify-between focus:outline-none text-gray-700 hover:text-blue-600 font-semibold" id="mobile-mega-menu-toggle">
          <span>Services</span>
          
          <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
            <path d="M5.25 7.5L10 12.25L14.75 7.5H5.25Z" />
          </svg>
        </button>
   
        <div class="hidden mt-2" id="mobile-mega-menu">
          <div class="grid grid-cols-1 gap-4">
            
            <div>
              <h3 class="text-lg font-semibold mb-2 text-gray-800">Web Development</h3>
              <ul class="space-y-2 text-gray-600 ml-4">
                <li><a href="#" class="hover:text-blue-600">Frontend</a></li>
                <li><a href="#" class="hover:text-blue-600">Backend</a></li>
                <li><a href="#" class="hover:text-blue-600">Full Stack</a></li>
                <li><a href="#" class="hover:text-blue-600">CMS</a></li>
              </ul>
            </div>
            
            <div>
              <h3 class="text-lg font-semibold mb-2 text-gray-800">Design</h3>
              <ul class="space-y-2 text-gray-600 ml-4">
                <li><a href="#" class="hover:text-blue-600">UI/UX</a></li>
                <li><a href="#" class="hover:text-blue-600">Graphic Design</a></li>
                <li><a href="#" class="hover:text-blue-600">Branding</a></li>
                <li><a href="#" class="hover:text-blue-600">Animation</a></li>
              </ul>
            </div>
            
            <div>
              <h3 class="text-lg font-semibold mb-2 text-gray-800">Marketing</h3>
              <ul class="space-y-2 text-gray-600 ml-4">
                <li><a href="#" class="hover:text-blue-600">SEO</a></li>
                <li><a href="#" class="hover:text-blue-600">Content Marketing</a></li>
                <li><a href="#" class="hover:text-blue-600">Social Media</a></li>
                <li><a href="#" class="hover:text-blue-600">Email Campaigns</a></li>
              </ul>
            </div>
            
            <div>
              <h3 class="text-lg font-semibold mb-2 text-gray-800">Consulting</h3>
              <ul class="space-y-2 text-gray-600 ml-4">
                <li><a href="#" class="hover:text-blue-600">Business Strategy</a></li>
                <li><a href="#" class="hover:text-blue-600">Technology Consulting</a></li>
                <li><a href="#" class="hover:text-blue-600">Analytics</a></li>
                <li><a href="#" class="hover:text-blue-600">Support</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      
      <a href="#" class="block text-gray-700 hover:text-blue-600 font-semibold">About</a>
      <a href="#" class="block text-gray-700 hover:text-blue-600 font-semibold">Contact</a>
      
    </div>
  </div>
</nav>
<script>
  const mobileMenuBtn = document.getElementById('mobile-menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  const mobileMegaMenuToggle = document.getElementById('mobile-mega-menu-toggle');
  const mobileMegaMenu = document.getElementById('mobile-mega-menu');

mobileMenuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });

if (mobileMegaMenuToggle) {
    mobileMegaMenuToggle.addEventListener('click', () => {
      mobileMegaMenu.classList.toggle('hidden');
    });
  }
</script>

Related Examples

Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

8 months ago

2.4k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

8 months ago

2.9k
Apple Dock Navigation Bar

Author:
Cristian

6 months ago

918
Nav Bar
Animated Mobile Dropdown menu

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

5 months ago

1.4k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

5 months ago

1k
Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

4 months ago

1.3k
Active Beauty Main Page

Author:
Maxim

3 months ago

448
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

2 months ago

397
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

1 month ago

431
Life Tree
by salvator

Author:
Baraka Salvator

1 month ago

194
joker
joker cyber punk

Author:
Baraka Salvator

1 month ago

371
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

4 weeks ago

234

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components