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 retro

Una barra de navegación retro/vintage receptiva y de alto contraste adecuada para sitios web de comida/restaurantes, con estética de los años 80/90 y compatibilidad con el modo oscuro.

Abrir

Navegación de comercio electrónico brutalista

Un componente de navegación de estilo brutalista para el comercio electrónico, con un esquema de color en escala de grises, diseño complejo, capacidad de respuesta y compatibilidad con el modo oscuro, creado con Tailwind CSS.

Abrir

Componente de navegación skeuomórfica

Un componente de navegación diseñado en un estilo skeuomórfico, con colores vibrantes y un diseño responsivo adecuado para el contenido del blog. Incluye funciones interactivas como efectos de desplazamiento y está optimizado para el modo oscuro.

Abrir