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

Sticky Navigation-Komponente

Eine Sticky-Navigationskomponente mit Neumorphism-Design, komplementärem Farbschema, moderater Komplexität und reaktionsschneller Unterstützung für dunkle Themen für ein Dashboard. Das Design enthält weiche Schatten für den Neumorphismus-Effekt und verwendet Komplementärfarben, um eine optisch ansprechende Benutzeroberfläche zu schaffen. Es eignet sich für ein Dashboard, das Datenvisualisierung und Bedienfelder bereitstellt.

Vorschau

HTML-Code 

<nav class="dark:bg-gray-800 dark:text-gray-200 bg-gray-200 text-gray-800 p-4 sticky top-0 z-50 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-2xl font-semibold">Dashboard</div>
    <ul class="flex space-x-6">
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Overview</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Analytics</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Reports</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Settings</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <img class="w-8 h-8 rounded-full"
        src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <button class="dark:text-gray-200 text-gray-800 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.003-9.127a9.006 9.006 0 00-7.872 7.872m15.744 0A9.006 9.006 0 0112 21.003m-4.127-8.003a9.006 9.006 0 017.872-7.872m0 15.744a9.006 9.006 0 00-7.872-7.872"></path>
        </svg>
      </button>
    </div>
  </div>
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
    }
  </style>
</nav>

Verwandte Komponenten

Sticky Navigation-Komponente

Eine komplexe, skeuomorphe, klebrige Navigationsleiste mit leuchtenden Farben, die für Social-Media-Schnittstellen entwickelt wurde. Enthält Responsive Design und Unterstützung für den Dunkelmodus mit Tailwind CSS. Mit Profilbild, Suchleiste, Benachrichtigungen und Messaging-Symbolen.

Offen

Brutalismus Klebrige Navigation

Eine komplexe Sticky Navigation Component mit Brutalismus-Design, monochromatischem Farbschema, entwickelt für Portfolios, mit responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Sticky Navigation (Glasmorphismus)

Sticky Navigation Component mit Unterstützung für Glassmorphism-Stil, responsive und Dark Theme.

Offen