CCHub Logo CCHub Tailwind Collection
Komponenten Navigation Dashboard-Navigation (Material Design)

Dashboard-Navigation (Material Design)

Material Design Dashboard-Navigationskomponente mit triadischem Farbschema und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<nav class="bg-white dark:bg-gray-800 shadow">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-gray-800 dark:text-white font-bold text-xl">Dashboard</div>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Home</a>
        <a href="#" class="text-gray-800 dark:text-white hover:text-teal-500 dark:hover:text-teal-400 transition duration-300">Analytics</a>
        <a href="#" class="text-gray-800 dark:text-white hover:text-red-500 dark:hover:text-red-400 transition duration-300">Settings</a>
      </div>
    </div>
  </div>
</nav>

Verwandte Komponenten

Luxus-Navigationskomponente

Eine elegante, reaktionsschnelle Navigationskomponente für Mode- und Beauty-Marken mit einem anspruchsvollen Schwarz-Weiß-Design mit heller Akzentfarbe, Unterstützung des Dunkelmodus und minimalen Elementen.

Offen

Corporate_Travel_Navigation

Eine komplexe, saubere und vertrauenswürdige Navigationsleiste im Unternehmensstil für Reise-/Tourismus-Websites. Verfügt über mehrere interaktive Elemente, volle Reaktionsfähigkeit und Unterstützung des Dunkelmodus mit Komplementärfarben.

Offen

RetroNav

Eine einfache, reaktionsschnelle und mit dem Dunkelmodus kompatible Navigationskomponente mit Retro-/Vintage-Design, lebendigem Farbschema und minimalen Elementen, die für E-Commerce-Websites geeignet ist.

Offen