Componentes Navegación Componente de navegación

Componente de navegación

Una barra de navegación limpia, profesional y receptiva adecuada para plataformas educativas, con un esquema de color triádico, compatibilidad con modo oscuro y un diseño simple con enlaces de navegación comunes y un botón de llamada a la acción.

Vista previa

Código HTML

<nav class="bg-blue-600 dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-white dark:text-orange-300 text-2xl font-bold tracking-wide hover:text-orange-200 dark:hover:text-white transition duration-300">
      EduHub
    </a>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="text-white dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-blue-500 rounded-md p-2">
        <svg class="h-6 w-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-7 6h7"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 items-center">
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        Courses
      </a>
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        Programs
      </a>
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        About Us
      </a>
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        Contact
      </a>
      <button class="bg-orange-500 dark:bg-emerald-500 text-white dark:text-gray-900 px-6 py-2 rounded-full font-semibold hover:bg-orange-600 dark:hover:bg-emerald-600 transition duration-300 shadow-md">
        Sign Up
      </button>
    </div>

  </div>

  <!-- Mobile Menu (hidden by default, shown via JS toggle if needed) -->
  <!-- For this pure HTML/Tailwind component, we can use a utility class to demonstrate the concept, 
       but a real implementation would require toggle class using JS. -->
  <div class="md:hidden bg-blue-700 dark:bg-gray-800 pb-3 hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        Courses
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        Programs
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        About Us
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        Contact
      </a>
      <button class="block w-full text-left px-3 py-2 mt-2 rounded-md text-base font-semibold text-white dark:text-gray-900 bg-orange-500 dark:bg-emerald-500 hover:bg-orange-600 dark:hover:bg-emerald-600 transition duration-300 shadow-sm">
        Sign Up
      </button>
    </div>
  </div>
</nav>

Componentes relacionados

Barra de navegación neumórfica

Una barra de navegación neumórfica simple y receptiva diseñada para plataformas de citas/sociales, que utiliza una paleta de colores bosque/verde con soporte para modo oscuro.

Abrir

RetroNav

Un componente de navegación simple, receptivo y compatible con el modo oscuro con un diseño retro / vintage, una combinación de colores vibrantes y elementos mínimos, adecuado para sitios web de comercio electrónico.

Abrir

Componente de navegación skeuomórfica

Un componente de navegación esqueuomórfico diseñado para imitar elementos del mundo real, como un panel de control físico o un panel de control. Cuenta con un diseño responsivo, efectos de desplazamiento que simulan pulsaciones de botones físicos y compatibilidad con temas oscuros. La navegación incluye sombras, degradados y texturas sutiles para crear una apariencia táctil en 3D que recuerda a las interfaces físicas.

Abrir