Back to Discover

Tailwind CSS Dropdown Navbar Code Snippet

Amelia

Created Nov 03, 2025

173 views

0 likes

0 comments

0 forks

Export Fork Like

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50">
  <!-- Navbar -->
  <nav 
       x-data="{ 
               mobileMenuOpen: false,
               servicesOpen: false,
               productsOpen: false,
               resourcesOpen: false,
               profileOpen: false
               }"
       @click.away="servicesOpen = false; productsOpen = false; resourcesOpen = false; profileOpen = false"
       class="bg-gradient-to-r from-primary via-primary-light to-primary shadow-lg"
       >
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <div class="flex items-center space-x-2">
          <ion-icon name="flame-outline" class="text-white text-3xl"></ion-icon>
          <span class="text-white text-xl font-bold">BrandLogo</span>
        </div>

        <!-- Desktop Navigation -->
        <div class="hidden md:flex items-center space-x-1">
          <!-- Home Link -->
          <a href="#home" class="text-gray-200 hover:text-white hover:bg-white/10 px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-1">
            <ion-icon name="home-outline"></ion-icon>
            <span>Home</span>
          </a>

          <!-- Services Dropdown -->
          <div class="relative" x-data="{ open: false }">
            <button 
                    @click="servicesOpen = !servicesOpen"
                    @mouseenter="servicesOpen = true"
                    class="text-gray-200 hover:text-white hover:bg-white/10 px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-1"
                    >
              <ion-icon name="briefcase-outline"></ion-icon>
              <span>Services</span>
              <ion-icon :name="servicesOpen ? 'chevron-up-outline' : 'chevron-down-outline'" class="text-sm"></ion-icon>
            </button>

            <!-- Services Dropdown Menu -->
            <div 
                 x-show="servicesOpen"
                 @mouseenter="servicesOpen = true"
                 @mouseleave="servicesOpen = false"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100 transform scale-100"
                 x-transition:leave-end="opacity-0 transform scale-95"
                 class="absolute left-0 mt-2 w-56 bg-white rounded-lg shadow-xl overflow-hidden z-50"
                 >
              <a href="#web-dev" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="code-outline" class="text-primary text-xl"></ion-icon>
                <div>
                  <div class="text-gray-800 font-medium">Web Development</div>
                  <div class="text-gray-500 text-sm">Custom websites & apps</div>
                </div>
              </a>
              <a href="#design" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="color-palette-outline" class="text-primary text-xl"></ion-icon>
                <div>
                  <div class="text-gray-800 font-medium">Design Services</div>
                  <div class="text-gray-500 text-sm">UI/UX & branding</div>
                </div>
              </a>
              <a href="#consulting" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="people-outline" class="text-primary text-xl"></ion-icon>
                <div>
                  <div class="text-gray-800 font-medium">Consulting</div>
                  <div class="text-gray-500 text-sm">Expert guidance</div>
                </div>
              </a>
            </div>
          </div>

          <!-- Products Dropdown -->
          <div class="relative">
            <button 
                    @click="productsOpen = !productsOpen"
                    @mouseenter="productsOpen = true"
                    class="text-gray-200 hover:text-white hover:bg-white/10 px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-1"
                    >
              <ion-icon name="cube-outline"></ion-icon>
              <span>Products</span>
              <ion-icon :name="productsOpen ? 'chevron-up-outline' : 'chevron-down-outline'" class="text-sm"></ion-icon>
            </button>

            <!-- Products Dropdown Menu -->
            <div 
                 x-show="productsOpen"
                 @mouseenter="productsOpen = true"
                 @mouseleave="productsOpen = false"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100 transform scale-100"
                 x-transition:leave-end="opacity-0 transform scale-95"
                 class="absolute left-0 mt-2 w-56 bg-white rounded-lg shadow-xl overflow-hidden z-50"
                 >
              <a href="#software" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="laptop-outline" class="text-primary text-xl"></ion-icon>
                <div>
                  <div class="text-gray-800 font-medium">Software Solutions</div>
                  <div class="text-gray-500 text-sm">Enterprise tools</div>
                </div>
              </a>
              <a href="#mobile" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="phone-portrait-outline" class="text-primary text-xl"></ion-icon>
                <div>
                  <div class="text-gray-800 font-medium">Mobile Apps</div>
                  <div class="text-gray-500 text-sm">iOS & Android</div>
                </div>
              </a>
              <a href="#api" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="git-network-outline" class="text-primary text-xl"></ion-icon>
                <div>
                  <div class="text-gray-800 font-medium">API Platform</div>
                  <div class="text-gray-500 text-sm">Developer tools</div>
                </div>
              </a>
            </div>
          </div>

          <!-- Resources Dropdown -->
          <div class="relative">
            <button 
                    @click="resourcesOpen = !resourcesOpen"
                    @mouseenter="resourcesOpen = true"
                    class="text-gray-200 hover:text-white hover:bg-white/10 px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-1"
                    >
              <ion-icon name="library-outline"></ion-icon>
              <span>Resources</span>
              <ion-icon :name="resourcesOpen ? 'chevron-up-outline' : 'chevron-down-outline'" class="text-sm"></ion-icon>
            </button>

            <!-- Resources Dropdown Menu -->
            <div 
                 x-show="resourcesOpen"
                 @mouseenter="resourcesOpen = true"
                 @mouseleave="resourcesOpen = false"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100 transform scale-100"
                 x-transition:leave-end="opacity-0 transform scale-95"
                 class="absolute left-0 mt-2 w-56 bg-white rounded-lg shadow-xl overflow-hidden z-50"
                 >
              <a href="#blog" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="newspaper-outline" class="text-primary text-xl"></ion-icon>
                <div>
                  <div class="text-gray-800 font-medium">Blog</div>
                  <div class="text-gray-500 text-sm">Latest articles</div>
                </div>
              </a>
              <a href="#docs" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="document-text-outline" class="text-primary text-xl"></ion-icon>
                <div>
                  <div class="text-gray-800 font-medium">Documentation</div>
                  <div class="text-gray-500 text-sm">Guides & tutorials</div>
                </div>
              </a>
              <a href="#support" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="help-circle-outline" class="text-primary text-xl"></ion-icon>
                <div>
                  <div class="text-gray-800 font-medium">Support Center</div>
                  <div class="text-gray-500 text-sm">Get help</div>
                </div>
              </a>
            </div>
          </div>

          <!-- Contact Link -->
          <a href="#contact" class="text-gray-200 hover:text-white hover:bg-white/10 px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-1">
            <ion-icon name="mail-outline"></ion-icon>
            <span>Contact</span>
          </a>
        </div>

        <!-- Right Side - Profile Dropdown & CTA -->
        <div class="hidden md:flex items-center space-x-4">
          <button class="bg-white text-primary px-5 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors duration-200">
            Get Started
          </button>

          <!-- Profile Dropdown -->
          <div class="relative">
            <button 
                    @click="profileOpen = !profileOpen"
                    class="flex items-center space-x-2 text-gray-200 hover:text-white transition-colors duration-200"
                    >
              <div class="w-9 h-9 rounded-full bg-white/20 flex items-center justify-center">
                <ion-icon name="person-outline" class="text-xl"></ion-icon>
              </div>
            </button>

            <!-- Profile Dropdown Menu -->
            <div 
                 x-show="profileOpen"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100 transform scale-100"
                 x-transition:leave-end="opacity-0 transform scale-95"
                 class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl overflow-hidden z-50"
                 >
              <a href="#profile" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="person-circle-outline" class="text-primary text-xl"></ion-icon>
                <span class="text-gray-800">My Profile</span>
              </a>
              <a href="#settings" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="settings-outline" class="text-primary text-xl"></ion-icon>
                <span class="text-gray-800">Settings</span>
              </a>
              <hr class="border-gray-200">
              <a href="#logout" class="flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
                <ion-icon name="log-out-outline" class="text-primary text-xl"></ion-icon>
                <span class="text-gray-800">Logout</span>
              </a>
            </div>
          </div>
        </div>

        <!-- Mobile Menu Button -->
        <button 
                @click="mobileMenuOpen = !mobileMenuOpen"
                class="md:hidden text-white text-2xl focus:outline-none"
                >
          <ion-icon :name="mobileMenuOpen ? 'close-outline' : 'menu-outline'"></ion-icon>
        </button>
      </div>

      <!-- Mobile Menu -->
      <div 
           x-show="mobileMenuOpen"
           x-transition:enter="transition ease-out duration-200"
           x-transition:enter-start="opacity-0 transform -translate-y-2"
           x-transition:enter-end="opacity-100 transform translate-y-0"
           x-transition:leave="transition ease-in duration-150"
           x-transition:leave-start="opacity-100 transform translate-y-0"
           x-transition:leave-end="opacity-0 transform -translate-y-2"
           class="md:hidden pb-4"
           >
        <div class="flex flex-col space-y-2">
          <a href="#home" class="text-gray-200 hover:text-white hover:bg-white/10 px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-2">
            <ion-icon name="home-outline"></ion-icon>
            <span>Home</span>
          </a>

          <!-- Mobile Services Dropdown -->
          <div x-data="{ open: false }">
            <button 
                    @click="open = !open"
                    class="w-full text-gray-200 hover:text-white hover:bg-white/10 px-4 py-2 rounded-lg transition-all duration-200 flex items-center justify-between"
                    >
              <div class="flex items-center space-x-2">
                <ion-icon name="briefcase-outline"></ion-icon>
                <span>Services</span>
              </div>
              <ion-icon :name="open ? 'chevron-up-outline' : 'chevron-down-outline'"></ion-icon>
            </button>
            <div x-show="open" class="ml-6 mt-2 space-y-2">
              <a href="#web-dev" class="block text-gray-300 hover:text-white px-4 py-2">Web Development</a>
              <a href="#design" class="block text-gray-300 hover:text-white px-4 py-2">Design Services</a>
              <a href="#consulting" class="block text-gray-300 hover:text-white px-4 py-2">Consulting</a>
            </div>
          </div>

          <!-- Mobile Products Dropdown -->
          <div x-data="{ open: false }">
            <button 
                    @click="open = !open"
                    class="w-full text-gray-200 hover:text-white hover:bg-white/10 px-4 py-2 rounded-lg transition-all duration-200 flex items-center justify-between"
                    >
              <div class="flex items-center space-x-2">
                <ion-icon name="cube-outline"></ion-icon>
                <span>Products</span>
              </div>
              <ion-icon :name="open ? 'chevron-up-outline' : 'chevron-down-outline'"></ion-icon>
            </button>
            <div x-show="open" class="ml-6 mt-2 space-y-2">
              <a href="#software" class="block text-gray-300 hover:text-white px-4 py-2">Software Solutions</a>
              <a href="#mobile" class="block text-gray-300 hover:text-white px-4 py-2">Mobile Apps</a>
              <a href="#api" class="block text-gray-300 hover:text-white px-4 py-2">API Platform</a>
            </div>
          </div>

          <!-- Mobile Resources Dropdown -->
          <div x-data="{ open: false }">
            <button 
                    @click="open = !open"
                    class="w-full text-gray-200 hover:text-white hover:bg-white/10 px-4 py-2 rounded-lg transition-all duration-200 flex items-center justify-between"
                    >
              <div class="flex items-center space-x-2">
                <ion-icon name="library-outline"></ion-icon>
                <span>Resources</span>
              </div>
              <ion-icon :name="open ? 'chevron-up-outline' : 'chevron-down-outline'"></ion-icon>
            </button>
            <div x-show="open" class="ml-6 mt-2 space-y-2">
              <a href="#blog" class="block text-gray-300 hover:text-white px-4 py-2">Blog</a>
              <a href="#docs" class="block text-gray-300 hover:text-white px-4 py-2">Documentation</a>
              <a href="#support" class="block text-gray-300 hover:text-white px-4 py-2">Support Center</a>
            </div>
          </div>

          <a href="#contact" class="text-gray-200 hover:text-white hover:bg-white/10 px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-2">
            <ion-icon name="mail-outline"></ion-icon>
            <span>Contact</span>
          </a>

          <button class="bg-white text-primary px-5 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors duration-200 mt-4">
            Get Started
          </button>
        </div>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <section class="bg-gradient-to-br from-gray-50 to-gray-100 py-20">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Dropdown Navbar Example</h1>
      <p class="text-lg text-gray-600 mb-8">Professional navbar with multiple dropdown menus</p>
      <p class="text-gray-500">Hover over or click the menu items to see the dropdown functionality</p>
    </div>
  </section>

  <!-- Content Section -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <h2 class="text-3xl font-bold text-gray-900 mb-6">Features</h2>
      <div class="grid md:grid-cols-3 gap-6">
        <div class="p-6 bg-gray-50 rounded-lg">
          <ion-icon name="layers-outline" class="text-primary text-4xl mb-3"></ion-icon>
          <h3 class="text-xl font-semibold text-gray-900 mb-2">Multi-level Dropdowns</h3>
          <p class="text-gray-600">Multiple dropdown menus with smooth transitions and hover effects.</p>
        </div>
        <div class="p-6 bg-gray-50 rounded-lg">
          <ion-icon name="phone-portrait-outline" class="text-primary text-4xl mb-3"></ion-icon>
          <h3 class="text-xl font-semibold text-gray-900 mb-2">Mobile Responsive</h3>
          <p class="text-gray-600">Fully responsive design with mobile-optimized dropdown navigation.</p>
        </div>
        <div class="p-6 bg-gray-50 rounded-lg">
          <ion-icon name="flash-outline" class="text-primary text-4xl mb-3"></ion-icon>
          <h3 class="text-xl font-semibold text-gray-900 mb-2">Fast & Smooth</h3>
          <p class="text-gray-600">Alpine.js powered interactions with beautiful animations.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-gradient-to-r from-primary via-primary-light to-primary text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <p>&copy; 2026 BrandLogo. All rights reserved.</p>
    </div>
  </footer>

  tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary': '#58111A',
                        'primary-light': '#7A1825',
                        'primary-dark': '#3D0C12',
                    }
                }
            }
        }