Nav Bar

Animated Mobile Dropdown menu

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

Navigations Menu Navbar Social media buttons

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

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

Tailwind v3.4 3.1k 5

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

Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.7k
Navbar compoent

Amit Pachange

3 years ago

17.3k
New Nav Component
A new navigation component

Amit PR

2 years ago

3.8k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.5k
Tailwind css navigation header
Tailwind css navigation header

Abid Ullah

2 years ago

3.2k
Animated underline hover navbar
Simple animated underline hover effect navbar.

inbarajan P

2 years ago

3.6k
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Coastal UI

1 year ago

3.9k
animated navigation bar

Md. Tofayel islam

1 year ago

3.1k
NavBar

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

1 year ago

2.8k
Apple Dock Navigation Bar

Cristian

1 year ago

3k
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Rathanak Phan

1 year ago

2.2k
Collapsible Sidebar Menu

Rajesh Maheshwari

1 year ago

3.5k