Home
Samuel Abera
Nav Bar

Nav Bar

Animated Mobile Dropdown menu

This tailwind example is contributed by Samuel Abera, 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

Author Samuel Abera

410

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