Componenti Navigazione Navigazione nel cruscotto (Material Design)

Navigazione nel cruscotto (Material Design)

Componente di navigazione del cruscotto di progettazione dei materiali con combinazione di colori triadica e supporto per la modalità scura.

Anteprima

Codice HTML

<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>

Componenti correlati

Componente di navigazione skeuomorfa

Un componente di navigazione progettato in uno stile scheumorfico, caratterizzato da colori vivaci e un layout reattivo adatto ai contenuti del blog. Include funzionalità interattive come gli effetti al passaggio del mouse ed è ottimizzato per la modalità oscura.

Aperto

Componente di navigazione

Un componente di navigazione reattivo in modalità scura progettato per l'e-commerce con una combinazione di colori pastello e un layout semplice.

Aperto

Componente di navigazione

Un componente di navigazione semplice e reattivo per un sito web portfolio, dotato di un'interfaccia utente in modalità scura. Il design utilizza colori complementari e garantisce leggibilità e appeal estetico su schermi di varie dimensioni.

Aperto