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

Navigation collante (glassmorphism)

Composant de navigation collant avec prise en charge du style Glassmorphism, réactif et du thème sombre.

Ouvrir

Brutalisme Navigation collante

Un composant de navigation autocollant complexe avec un design brutaliste, une palette de couleurs monochromatiques, conçu pour les portfolios, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir

Navigation autocollante rétro E-commerce

Un composant de navigation autocollant rétro/vintage pour les sites de commerce électronique avec des couleurs vives, des éléments complexes, une réactivité et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir