Components Navigation Bar Dark Mode Navigation Bar

Dark Mode Navigation Bar

Navigation Bar Component with responsive effects and dark theme support.

Preview

HTML Code

<nav class="bg-gray-800 p-4 text-white">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-lg font-semibold">My Website</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Services</a>
      <a href="#" class="hover:underline">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Related Components

Navigation Bar Component

A responsive navigation bar for an e-commerce website, featuring a glassmorphism design style with a grayscale color scheme and dark mode support using Tailwind CSS.

Open

Cyberpunk_Retro_Food_Navbar

A simple, responsive navigation bar with cyberpunk-retro aesthetics, designed for food/restaurant websites. Features dark background, muted accent colors, and dark mode support.

Open

Skeuomorphic Social Media Nav Bar

Skeuomorphic social media navigation bar with triadic color scheme and moderate complexity.

Open