Tailwind CSS Dropdown Navbar Code Snippet
Amelia
Created Nov 03, 2025
<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>© 2026 BrandLogo. All rights reserved.</p>
</div>
</footer>
tailwind.config = {
theme: {
extend: {
colors: {
'primary': '#58111A',
'primary-light': '#7A1825',
'primary-dark': '#3D0C12',
}
}
}
}
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!