Composants Navigation collante Composant de navigation collante

Composant de navigation collante

Une barre de navigation autocollante simple, propre et fiable, adaptée aux sites Web d’entreprise et professionnels, en particulier aux sites d’emploi et aux plateformes de carrière. Dispose de couleurs à contraste élevé, de réactivité et de prise en charge du mode sombre.

Aperçu

HTML Code

<nav class="sticky top-0 z-50 bg-white shadow-md dark:bg-gray-800 transition duration-300">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-2xl font-bold text-blue-700 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition duration-200">
      JobBoard
    </a>

    <!-- Navigation Links - Desktop -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Jobs</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Companies</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Candidates</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">About Us</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Contact</a>
    </div>

    <!-- Action Buttons - Desktop -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
        Sign In
      </a>
      <a href="#" class="px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
        Post a Job
      </a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Toggle menu">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default, shown by JS in a real app) -->
  <div class="md:hidden flex flex-col space-y-2 p-4 border-t border-gray-200 dark:border-gray-700" style="display: none;">
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Jobs</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Companies</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Candidates</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">About Us</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Contact</a>
    <a href="#" class="block px-4 py-2 rounded-md border border-gray-300 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 text-center transition duration-200 mt-2">Sign In</a>
    <a href="#" class="block px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">Post a Job</a>
  </div>
</nav>

Composants associés

Composant de navigation collante

Composant de navigation autocollant réactif avec mode sombre

Ouvrir

Composant de navigation collante

Un composant de navigation autocollant avec une conception Neumorphism, une palette de couleurs complémentaire, une complexité modérée et une prise en charge réactive du thème sombre pour un tableau de bord. La conception intègre des ombres douces pour l’effet Neumorphism et utilise des couleurs complémentaires pour créer une interface visuellement attrayante. Il convient à un tableau de bord fournissant des panneaux de visualisation de données et de contrôle.

Ouvrir

Composant de navigation collante

Composant de navigation collant avec conception Skeuomorphism, réactif et prise en charge du thème sombre. Utilise Tailwind CSS.

Ouvrir