Componentes Menú de hamburguesas Componente del menú de hamburguesas

Componente del menú de hamburguesas

Componente de menú de hamburguesa responsivo con modo oscuro

Vista previa

Código HTML

<nav class="bg-stone-100 dark:bg-stone-800 shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between">
      <div class="flex space-x-7">
        <div>
          <!-- Website Logo -->
          <a href="#" class="flex items-center py-4 px-2">
            <span class="text-stone-500 dark:text-white text-lg font-semibold">Your Logo</span>
          </a>
        </div>
        <!-- Primary Navbar items -->
        <div class="hidden md:flex items-center space-x-1">
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Home</a>
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Services</a>
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">About</a>
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Contact Us</a>
        </div>
      </div>
      <!-- Secondary Navbar items -->
      <div class="hidden md:flex items-center space-x-3 ">
        <a href="" class="py-2 px-2 font-medium text-stone-500 dark:text-white rounded hover:bg-green-500 hover:text-white transition duration-300">Log In</a>
        <a href="" class="py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300">Sign Up</a>
      </div>
      <!-- Mobile menu button -->
      <div class="md:hidden flex items-center">
        <button class="outline-none mobile-menu-button">
          <svg class="w-6 h-6 text-stone-500 dark:text-white hover:text-green-500" x-show="!showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
          <svg class="w-6 h-6 text-stone-500 dark:text-white hover:text-green-500" x-show="showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- Mobile menu -->
  <div class="hidden mobile-menu">
    <ul class="">
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Home</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Services</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">About</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Contact Us</a></li>
    </ul>
  </div>
</nav>

Componentes relacionados

Componente del menú de hamburguesas

Un componente de menú de hamburguesas receptivo con un diseño brutalista, con alto contraste, estilos audaces y compatibilidad con el modo oscuro.

Abrir

Componente del menú de hamburguesas

Un componente complejo y receptivo del menú de hamburguesas con diseño de cristal, con un efecto translúcido similar al vidrio esmerilado, adecuado para un portafolio que exhibe trabajos o productos. Incluye un soporte de tema oscuro y utiliza Tailwind CSS para el estilo.

Abrir

Componente del menú de hamburguesas

Un componente receptivo del menú de hamburguesas diseñado en estilo brutalismo con una combinación de colores pastel. Adecuado para un portafolio que exhibe trabajos o productos.

Abrir