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

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

beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

11 months ago

2.2k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

1 month ago

259
Breadcrumb

Author:
Rajesh Maheshwari

3 months ago

381
Responsive Navbar Example
A working example of the navbar

Author:
Noob

2 years ago

16.1k
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.

Author:
Coastal UI

6 months ago

2.1k
Drinkware landing page

Author:
Maxim

2 months ago

543
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

1 month ago

56
Active Beauty Main Page

Author:
Maxim

2 months ago

293
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

2 months ago

645
Social Media Icons
Social Media Icons

Author:
Aman kumar

11 months ago

1.5k
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

9 months ago

1.5k
Social share icons

Author:
Amit Pachange

2 years ago

12.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components