Composants Navigation Composant de navigation

Composant de navigation

Une barre de navigation propre, professionnelle et réactive adaptée aux plates-formes éducatives, avec une palette de couleurs triadique, la prise en charge du mode sombre et une mise en page simple avec des liens de navigation courants et un bouton d’appel à l’action.

Aperçu

HTML Code

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

Composants associés

Composant de navigation Glassmorphism

Un composant de navigation de style glassmorphism pour les sites de commerce électronique, avec des couleurs monochromes, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir

Composant de navigation

Composant de navigation simple et réactif pour un site web de portfolio, doté d’une interface utilisateur en mode sombre. Le design utilise des couleurs complémentaires et assure la lisibilité et l’attrait esthétique sur différentes tailles d’écran.

Ouvrir

Luxury_SaaS_Navigation_Candy

Un composant de navigation de style luxe/premium pour les applications SaaS, avec une palette de couleurs sur le thème des bonbons (rose bonbon, vert menthe) et une typographie sophistiquée. Il est réactif, inclut la prise en charge du mode sombre et comporte des éléments interactifs.

Ouvrir