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

Sticky Navigation-Komponente

Eine saubere, vertrauenswürdige und einfache Sticky-Navigationsleiste, die für Unternehmens- und Event-Websites geeignet ist. Verfügt über Schwarz-Weiß-Monochrom mit heller Akzentfarbe, voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<header class="bg-white shadow-md dark:bg-gray-800 sticky top-0 z-50">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white flex items-center space-x-2">
      <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5M10 2L3 6v10l7 4 7-4V6l-7-4zm0 0a2 2 0 100 4 2 2 0 000-4z" />
      </svg>
      <span>EventName</span>
    </a>

    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Schedule</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Speakers</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Venue</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Sponsors</a>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 border border-indigo-600 dark:border-indigo-400 px-5 py-2 rounded-lg font-semibold hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-400 dark:hover:text-gray-900 transition duration-300 ease-in-out">Register</a>
    </div>

    <div class="md:hidden">
      <button type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white focus:outline-none focus:text-gray-700 dark:focus:text-white" aria-label="Toggle menu">
        <svg class="h-7 w-7" 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>
  </nav>
</header>

Verwandte Komponenten

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 minimalistische und reaktionsschnelle Sticky-Navigationsleiste für Blogs mit einem lebendigen Farbschema. Es unterstützt den Dunkelmodus und hat ein einfaches, übersichtliches Layout mit "Blog Title" auf der linken Seite und Navigationslinks auf der rechten Seite. Die Navigationsleiste bleibt am oberen Rand des Viewports, wenn der Benutzer einen Bildlauf durchführt.

Offen

Sticky Navigation-Komponente

Eine einfache, reaktionsschnelle und klebrige Navigationsleiste, die sich für einen Marktplatz eignet, mit einem analogen Farbschema und Unterstützung für den Dunkelmodus. Enthält subtile Mikrointeraktionen beim Schweben.

Offen