CCHub Logo CCHub Tailwind Collection
Komponenten Sticky Navigation Sticky Navigation-Komponente

Sticky Navigation-Komponente

Eine einfache, saubere und vertrauenswürdige Sticky-Navigationsleiste, die für Unternehmens- und professionelle Websites geeignet ist, insbesondere für Jobbörsen und Karriereplattformen. Verfügt über kontrastreiche Farben, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Vorschau

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>

Verwandte Komponenten

Sticky Navigation-Komponente - Dunkler Modus Pastell

Eine klebrige Navigationsleiste für den Dunkelmodus mit einem responsiven Layout und pastellfarbenen Akzenten. Die Navigationsleiste verbleibt beim Scrollen des Benutzers am oberen Rand des Viewports, wodurch die Benutzerfreundlichkeit für inhaltsintensive Seiten verbessert wird. Es enthält Platzhalter für ein Logo oder einen Website-Titel sowie Navigationslinks, die mit Tailwind CSS gestaltet sind, um ein modernes, sauberes Aussehen zu erzielen.

Offen

Sticky Navigation-Komponente

Eine klebrige Navigationskomponente in einem skeuomorphen Stil mit Komplementärfarben, die sich für ein Portfolio mit einer reichhaltigen Benutzeroberfläche eignet.

Offen

Sticky Navigation-Komponente

Eine Sticky-Navigationskomponente im Dunkelmodus für den E-Commerce, die ein komplementäres Farbschema und ein grundlegendes Layout verwendet.

Offen