Home
$@(\/)(\/)Y
Nav Bar

Nav Bar

Animated Mobile Dropdown menu

This tailwind example is contributed by $@(\/)(\/)Y, on 24-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Social media links,

Navigations Menu Navbar Social media buttons

$$@(\/)(\/)Y profile image$

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

724

Fork Fullscreen

<ul class="hidden lg:flex gap-16 text-white">
                <li><a href="" class="hover:text-[#ff7b02] transition-colors">Home</a></li>
                <li><a href="" class="hover:text-[#ff7b02] transition-colors">About</a></li>
                <li><a href="" class="hover:text-[#ff7b02] transition-colors">Services</a></li>
                <li><a href="" class="hover:text-[#ff7b02] transition-colors">Resources</a></li>
                <li><a href="" class="hover:text-[#ff7b02] transition-colors">Contact</a></li>
            </ul>

<ul class="hidden lg:flex gap-4">
                <li>
                    <a href="https://instagram.com" target="_blank"
                        class="w-8 h-8 grid place-items-center text-[#003347] bg-gradient-to-b from-[#e5a55d] to-[#ff7b02] rounded-lg hover:shadow-lg">
                        <i class="uil uil-instagram"></i>
                    </a>
                </li>
                <li>
                    <a href="https://twitter.com" target="_blank"
                        class="w-8 h-8 grid place-items-center text-[#003347] bg-gradient-to-b from-[#e5a55d] to-[#ff7b02] rounded-lg hover:shadow-lg">
                        <i class="uil uil-twitter"></i>
                    </a>
                </li>
                <li>
                    <a href="https://youtube.com" target="_blank"
                        class="w-8 h-8 grid place-items-center text-[#003347] bg-gradient-to-b from-[#e5a55d] to-[#ff7b02] rounded-lg hover:shadow-lg">
                        <i class="uil uil-youtube"></i>
                    </a>
                </li>
            </ul>

<button class="block lg:hidden text-3xl text-white" id="nav__toggle-open">
                <i class="uil uil-bars"></i>
            </button>
            <button class="hidden lg:hidden text-3xl text-white" id="nav__toggle-close">
                <i class="uil uil-multiply"></i>
            </button>
        </div>
    </nav>

<ul class="absolute top-[4rem] right-0  text-white flex-col hidden lg:hidden w-48 shadow-lg" id="mobile-nav">
        <li
            class="h-20 shadow-[-3rem_3rem_3rem_rgba(0,0,0,0.7)] bg-[#003347] hover:bg-[#003347]/80 animate-navAnimation [animation-delay:0ms]">
            <a href="" class="flex items-center h-full px-6">Home</a>
        </li>
        <li
            class="h-20 shadow-[-3rem_3rem_3rem_rgba(0,0,0,0.7)] bg-[#003347] hover:bg-[#003347]/80 animate-navAnimation [animation-delay:200ms]">
            <a href="" class="flex items-center h-full px-6">About</a>
        </li>
        <li
            class="h-20 shadow-[-3rem_3rem_3rem_rgba(0,0,0,0.7)] bg-[#003347] hover:bg-[#003347]/80 animate-navAnimation [animation-delay:400ms]">
            <a href="" class="flex items-center h-full px-6">Services</a>
        </li>
        <li
            class="h-20 shadow-[-3rem_3rem_3rem_rgba(0,0,0,0.7)] bg-[#003347] hover:bg-[#003347]/80 animate-navAnimation [animation-delay:600ms]">
            <a href="" class="flex items-center h-full px-6">Resources</a>
        </li>
        <li
            class="h-20 shadow-[-3rem_3rem_3rem_rgba(0,0,0,0.7)] bg-[#003347] hover:bg-[#003347]/80 animate-navAnimation [animation-delay:600ms]">
            <a href="" class="flex items-center h-full px-6">Contact</a>
        </li>
    </ul>
    
</div>

const nav = document.getElementById('mobile-nav');
        const openNavBtn = document.getElementById('nav__toggle-open');
        const closeNavBtn = document.getElementById('nav__toggle-close');

openNavBtn.addEventListener('click', () => {
            nav.classList.remove('hidden');
            openNavBtn.classList.add('hidden');
            closeNavBtn.classList.remove('hidden');
        });

closeNavBtn.addEventListener('click', () => {
            nav.classList.add('hidden');
            openNavBtn.classList.remove('hidden');
            closeNavBtn.classList.add('hidden');
        });
</script>

Related Examples