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 v3.4. It is responsive.

Menu Other Navbar

Author KULDEEP

Tailwind v3.4 2k 5

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

Muhammad Rizqi Juniyanto

1 year ago

3.9k
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

Ameth Galarcio

1 year ago

4.6k
Apple Dock Navigation Bar

Cristian

1 year ago

3k
Nav Bar
Animated Mobile Dropdown menu

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

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

Abhiraj

1 year ago

2.5k
Collapsible Sidebar Menu

Rajesh Maheshwari

1 year ago

3.5k
Active Beauty Main Page

Maxim

1 year ago

1.8k
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).

Nick Girga

1 year ago

1.8k
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.

Rajesh Pandey

1 year ago

1.5k
Life Tree
by salvator

Baraka Salvator

1 year ago

1.3k
joker
joker cyber punk

Baraka Salvator

1 year ago

2.1k
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.

Lekhraj Ghimire

1 year ago

2.4k