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

Retro E-commerce Sticky Navigation

Eine Retro-/Vintage-Sticky-Navigationskomponente für E-Commerce-Websites mit lebendigen Farben, komplexen Elementen, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus mit Tailwind CSS.

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

Sticky Navigation-Komponente

Eine saubere, vertrauenswürdige und reaktionsschnelle Sticky-Navigationsleiste, die mit einem pastellfarbenen Farbschema für den geschäftlichen/professionellen Gebrauch gestaltet wurde und für Wetter-/Klimaanwendungen geeignet ist. Enthält Unterstützung für den Dunkelmodus.

Offen