Navbar

This navbar implementation includes:

1. Responsive design that works on both desktop and mobile
2. Indigo-800 and Blue-900 color scheme for the background and accents
3. Dark mode support with a toggle button
4. Beautiful animations and effects:

1. Fade-in animation for menu items with staggered delays
2. Hover effects on menu items with underline animation
3. Smooth color transitions
4. Mobile menu slide-down animation

5. SVG icons for the dark mode toggle and mobile menu button
6. "Sign Up" call-to-action button
7. Mobile-friendly dropdown menu
8. Accessibility considerations (proper heading structure, color contrast, focus styles)

Key features:

- The background uses a gradient from Indigo-800 to Blue-900
- The navbar has a white background in light mode and dark gray in dark mode
- Text colors are adjusted for readability in both light and dark modes
- Menu items have hover effects with color changes and underline animations
- The dark mode toggle changes its icon based on the current mode
- The mobile menu slides down with a smooth animation when toggled
- Desktop menu items fade in with a staggered delay for a smooth entrance
- Dark mode is automatically applied based on system preferences
- The layout is responsive, with a hamburger menu for mobile screens

This implementation provides a visually appealing and functional navbar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

This tailwind example is contributed by nejaa badr, on 01-Nov-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Navbar

Author nejaa badr

Tailwind v3.4 5.1k 5

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Navbar</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fadeIn 0.3s ease-out forwards;
        }
        .nav-link {
            position: relative;
            overflow: hidden;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: currentColor;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease-out;
        }
        .nav-link:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }
        .mobile-menu {
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        }
    </style>
</head>
<body class="bg-gradient-to-r from-indigo-800 to-blue-900 min-h-screen">
    <header class="bg-white dark:bg-gray-800 shadow-lg">
        <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-indigo-800 dark:text-white transition-colors duration-300">
                Logo
            </a>
            <div class="hidden md:flex space-x-6">
                <a href="#" class="nav-link text-gray-700 dark:text-gray-200 hover:text-indigo-800 dark:hover:text-white transition-colors duration-300">Home</a>
                <a href="#" class="nav-link text-gray-700 dark:text-gray-200 hover:text-indigo-800 dark:hover:text-white transition-colors duration-300">About</a>
                <a href="#" class="nav-link text-gray-700 dark:text-gray-200 hover:text-indigo-800 dark:hover:text-white transition-colors duration-300">Services</a>
                <a href="#" class="nav-link text-gray-700 dark:text-gray-200 hover:text-indigo-800 dark:hover:text-white transition-colors duration-300">Contact</a>
            </div>
            <div class="hidden md:flex items-center space-x-4">
                <button id="darkModeToggle" class="text-gray-700 dark:text-gray-200 hover:text-indigo-800 dark:hover:text-white focus:outline-none transition-colors duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                    </svg>
                </button>
                <a href="#" class="bg-indigo-800 text-white px-4 py-2 rounded-lg hover:bg-blue-900 transition-colors duration-300">Sign Up</a>
            </div>
            <button id="mobileMenuButton" class="md:hidden text-gray-700 dark:text-gray-200 hover:text-indigo-800 dark:hover:text-white focus:outline-none transition-colors duration-300">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
        </nav>
        <div id="mobileMenu" class="mobile-menu md:hidden bg-white dark:bg-gray-800 shadow-lg absolute w-full left-0 transform -translate-y-full opacity-0">
            <div class="container mx-auto px-4 py-4 space-y-4">
                <a href="#" class="block text-gray-700 dark:text-gray-200 hover:text-indigo-800 dark:hover:text-white transition-colors duration-300">Home</a>
                <a href="#" class="block text-gray-700 dark:text-gray-200 hover:text-indigo-800 dark:hover:text-white transition-colors duration-300">About</a>
                <a href="#" class="block text-gray-700 dark:text-gray-200 hover:text-indigo-800 dark:hover:text-white transition-colors duration-300">Services</a>
                <a href="#" class="block text-gray-700 dark:text-gray-200 hover:text-indigo-800 dark:hover:text-white transition-colors duration-300">Contact</a>
                <a href="#" class="inline-block bg-indigo-800 text-white px-4 py-2 rounded-lg hover:bg-blue-900 transition-colors duration-300">Sign Up</a>
            </div>
        </div>
    </header>

<main class="container mx-auto px-4 py-8">
        <h1 class="text-4xl font-bold text-white mb-4">Welcome to Our Website</h1>
        <p class="text-white">This is the main content area. The navbar above has beautiful animations and effects.</p>
    </main>

function toggleDarkMode() {
            isDarkMode = !isDarkMode;
            document.documentElement.classList.toggle('dark');
            updateDarkModeIcon();
        }

function updateDarkModeIcon() {
            darkModeToggle.innerHTML = isDarkMode
                ? '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>'
                : '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>';
        }

darkModeToggle.addEventListener('click', toggleDarkMode);
        mobileMenuButton.addEventListener('click', toggleMobileMenu);

// Toggle dark mode based on system preference
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            toggleDarkMode();
        }

// Add fade-in animation to nav links
        const navLinks = document.querySelectorAll('.nav-link');
        navLinks.forEach((link, index) => {
            link.classList.add('animate-fade-in');
            link.style.animationDelay = `${index * 0.1}s`;
        });
    </script>
</body>
</html>

Related Examples

Simple Navbar
Simple Tailwind Navbar

JUGENDRA GANGWAR

2 months ago

227
Sticky Navbar
A modern, feature-rich, and fully responsive navigation bar built with Tailwind CSS. This premium navbar includes a top contact bar, multi-level mega menus, live search with suggestions, mobile drawer navigation, nested accordion menus, authentication buttons, sticky header, and smooth interactions. Perfect for SaaS, corporate, startup, agency, eCommerce, legal, education, and business websites.

JUGENDRA GANGWAR

2 months ago

152
Navbar compoent

Amit Pachange

3 years ago

17.3k
Modern page
hero page by salvator

Baraka Salvator

1 year ago

1.8k
websitee

Anonymous

1 year ago

951
navbar
navbar

Omer fils ELENGA

8 months ago

820
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.5k
Responsive navbar with dark mode support
Sidebar on small screen devices

TailwindFlex

4 years ago

20.5k
Dark mode sidenav with collapsible menu

Rajesh Maheshwari

1 year ago

2k
Navigation bar
Navbar

Aman kumar

2 years ago

5.2k
Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Mamadou Diouma II Bah

2 years ago

17k
Navbar

Crimson

1 year ago

3.6k