Componenti Navigazione permanente Componente di navigazione permanente

Componente di navigazione permanente

Componente di navigazione permanente reattivo con modalità scura

Anteprima

Codice HTML

<nav class="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">Social Site</div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a>
      </div>
      <div class="md:hidden">
        <button class="mobile-menu-button text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
          <svg class="h-6 w-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 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="mobile-menu hidden md:hidden mt-2">
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Profile</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Messages</a>
    </div>
  </div>
</nav>

Componenti correlati

Brutalista Navigazione Appiccicosa

Un componente di navigazione appiccicosa in stile brutalista con comportamento reattivo e supporto per la modalità oscura utilizzando Tailwind CSS. Presenta un contrasto elevato, una tipografia audace e un'estetica cruda e cruda.

Aperto

Componente di navigazione permanente

Un componente di navigazione appiccicoso con design del neumorfismo, combinazione di colori complementari, complessità moderata e supporto del tema scuro reattivo per una dashboard. Il design incorpora ombre morbide per l'effetto Neumorfismo e utilizza colori complementari per creare un'interfaccia visivamente accattivante. È adatto per una dashboard che fornisce visualizzazione dei dati e pannelli di controllo.

Aperto

Componente di navigazione permanente

Un componente di navigazione appiccicoso progettato in uno stile scheumorfico, che mostra colori complementari, adatto a un portfolio con un'interfaccia ricca.

Aperto