NavBar

This tailwind example is contributed by Samuel Abera, on 30-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Navigations Navbar

Author Samuel Abera

1.3k

Fork Fullscreen

<div class="hidden md:flex space-x-8 text-gray-400 dark:text-gray-700">
            <a href="#about" class="text-green-400 dark:text-green-600">Home</a>
            <a href="#what-i-do" class="hover:text-green-400 dark:hover:text-green-600 ">What I Do</a>
            <a href="#testimonials" class="hover:text-green-400 dark:hover:text-green-600 ">Testimonials</a>
            <a href="#clients" class="hover:text-green-400 dark:hover:text-green-600 ">Clients</a>
            <a href="#fun-facts" class="hover:text-green-400 dark:hover:text-green-600 ">Fun Facts</a>
          </div>

<div class="md:hidden flex items-center">
            <button id="mobile-menu-button" class="text-green-400 dark:text-green-600 hover:text-green-600 focus:outline-none">
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
          </button>
          </div>
        </div>
      </div>

<div id="mobile-menu" class="absolute inset-0 bg-[#111111] dark:bg-white bg-opacity-50 z-50 hidden">
        <div class="fixed inset-y-0 left-0 bg-[#111111] dark:bg-white w-64 p-6 transform -translate-x-full transition-transform">
          <button id="close-menu-button" class="text-green-400 dark:text-green-600 hover:text-green-600 focus:outline-none mb-4">
          <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
          <nav class="space-y-4 text-gray-400 dark:text-gray-700">
            <a href="#about" class="block text-green-400 dark:text-green-600">Home</a>
            <a href="#what-i-do" class="block hover:text-green-400 dark:hover:text-green-600 ">What I Do</a>
            <a href="#testimonials" class="block hover:text-green-400 dark:hover:text-green-600 ">Testimonials</a>
            <a href="#clients" class="block hover:text-green-400 dark:hover:text-green-600 ">Clients</a>
            <a href="#fun-facts" class="block hover:text-green-400 dark:hover:text-green-600 ">Fun Facts</a>
          </nav>
        </div>
      </div>
    </nav>

</div>
</div>

mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.remove('hidden');
      mobileMenu.querySelector('div').classList.remove('-translate-x-full');
    });

closeMenuButton.addEventListener('click', () => {
      mobileMenu.querySelector('div').classList.add('-translate-x-full');
      setTimeout(() => mobileMenu.classList.add('hidden'), 300);
    });

mobileMenu.addEventListener('click', (e) => {
      if (e.target === mobileMenu) {
        closeMenuButton.click();
      }
    });
</script>

Related Examples