Componentes Barra de navegación Barra de navegación en modo oscuro

Barra de navegación en modo oscuro

Componente de barra de navegación con efectos responsivos y soporte para temas oscuros.

Vista previa

Código HTML

<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>

Componentes relacionados

Redes Sociales-Glassmorphism-Navbar

Barra de navegación de redes sociales Glassmorphism responsiva con modo oscuro

Abrir

Barra de navegación Skeuomorphic

Una barra de navegación responsiva simple para redes sociales con un estilo de diseño esqueuomórfico, que utiliza un esquema de color análogo y admite el modo oscuro.

Abrir

Barra de navegación Art Deco

Una barra de navegación receptiva inspirada en el Art Deco para CRM/Business Tools, con patrones geométricos, ricos tonos joya y compatibilidad con el modo oscuro. Diseñado con complejidad moderada, incluyendo elementos interactivos.

Abrir