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

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.

Vorschau

HTML-Code 

<nav class="bg-gradient-to-r from-teal-400 to-blue-500 dark:from-gray-800 dark:to-gray-900 p-4 shadow-md sticky top-0 z-50">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Blog Title -->
    <a href="#" class="text-white text-2xl font-bold dark:text-gray-100">Blog Title</a>

    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Home</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Categories</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">About</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Contact</a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default, can be shown with JS) -->
  <div class="md:hidden mt-4 space-y-2">
    <!-- Hidden for this pure HTML example as JS is not allowed -->
  </div>
</nav>

Verwandte Komponenten

Klebrige Navigationskomponente - Neumorphes Pastell

Eine komplexe, klebrige Navigationskomponente mit einem Neumorphism-Designstil und einem pastellfarbenen Farbschema, das sich für Dokumentations- oder Wiki-Seiten eignet. Es verfügt über verschachtelte Navigationselemente, eine Suchleiste und Unterstützung für den Dunkelmodus, die alle mit HTML und Tailwind CSS implementiert sind, um eine vollständige Reaktionsfähigkeit zu gewährleisten.

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

Graustufen-Skeuomorphes Sticky Nav

Eine reaktionsschnelle Sticky-Navigationsleiste für Blogs, die mit Skeuomorphismus unter Verwendung einer Graustufenpalette gestaltet ist. Bietet Unterstützung für den Dunkelmodus und ein einfaches Layout. Erstellt mit Tailwind CSS (nur HTML), kein JavaScript. Das skeuomorphe Design zielt darauf ab, die Navigationsleiste wie ein physisches, leicht erhabenes Element erscheinen zu lassen.

Offen