Home
nejaa badr
Navbar

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 CSS v3. It is responsive. It supports dark mode.

Navbar

Author nejaa badr

4.5k

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