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

Una barra di navigazione responsive con microinterazioni coinvolgenti, progettata per l'e-commerce, utilizzando un tema scuro e colori color terra.

Aperto

Barra di navigazione skeuomorphic

Un componente della barra di navigazione reattivo progettato in uno stile scheumorfico con supporto per temi scuri utilizzando Tailwind CSS.

Aperto

Componente della barra di navigazione

Una barra di navigazione reattiva con microinterazioni e supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto