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

Sticky Navigation-Komponente

Responsive Sticky Navigation Komponente mit Dark Mode

Vorschau

HTML-Code 

<nav class="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">Social Site</div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a>
      </div>
      <div class="md:hidden">
        <button class="mobile-menu-button text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
          <svg class="h-6 w-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>
    <div class="mobile-menu hidden md:hidden mt-2">
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Profile</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Messages</a>
    </div>
  </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 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 - Neumorphismus

Eine reaktionsschnelle Sticky-Navigationskomponente mit Neumorphism-Design, komplementärem Farbschema und Unterstützung für dunkle Themen, die für eine Portfolio-Website geeignet ist. Verwendet Tailwind CSS mit Klassen im Dunkelmodus und enthält subtile Schatten für den Neumorphismus-Effekt.

Offen