Componenti Barra di navigazione Barra di navigazione in modalità scura

Barra di navigazione in modalità scura

Componente della barra di navigazione con effetti reattivi e supporto per temi scuri.

Anteprima

Codice HTML

<nav class="bg-gray-800 p-4 text-white">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-lg font-semibold">My Website</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Services</a>
      <a href="#" class="hover:underline">Contact</a>
    </div>
    <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 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Componenti correlati

Componente della barra di navigazione

Un componente della barra di navigazione reattivo progettato in stile Material Design con combinazione di colori triadica, adatto per le interfacce dei social media e include il supporto per il tema scuro.

Aperto

Cyberpunk_Retro_Food_Navbar

Una barra di navigazione semplice e reattiva con un'estetica cyberpunk-retrò, progettata per siti web di cibo/ristoranti. Presenta sfondo scuro, colori tenui e supporto per la modalità scura.

Aperto

Social-Media-Glassmorphism-Navbar

Barra di navigazione dei social media Glassmorphism reattivo con modalità scura

Aperto