Componente di navigazione permanente
Una barra di navigazione appiccicosa pulita, affidabile e semplice, adatta per siti Web aziendali ed eventi. Presenta monocromatico in bianco e nero con un colore d'accento brillante, piena reattività e supporto per la modalità scura.
Codice HTML
<header class="bg-white shadow-md dark:bg-gray-800 sticky top-0 z-50">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between">
<a href="#" class="text-2xl font-bold text-gray-900 dark:text-white flex items-center space-x-2">
<svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5M10 2L3 6v10l7 4 7-4V6l-7-4zm0 0a2 2 0 100 4 2 2 0 000-4z" />
</svg>
<span>EventName</span>
</a>
<div class="hidden md:flex space-x-8">
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Schedule</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Speakers</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Venue</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Sponsors</a>
<a href="#" class="text-indigo-600 dark:text-indigo-400 border border-indigo-600 dark:border-indigo-400 px-5 py-2 rounded-lg font-semibold hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-400 dark:hover:text-gray-900 transition duration-300 ease-in-out">Register</a>
</div>
<div class="md:hidden">
<button type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white focus:outline-none focus:text-gray-700 dark:focus:text-white" aria-label="Toggle menu">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</nav>
</header>Componenti correlati
Componente di navigazione permanente
Una barra di navigazione appiccicosa pulita, affidabile e reattiva progettata con una combinazione di colori pastello per uso aziendale/professionale, adatta per applicazioni meteorologiche/climatiche. Include il supporto per la modalità oscura.
Componente di navigazione permanente - Modalità scura pastello
Una barra di navigazione appiccicosa progettata per la modalità scura, caratterizzata da un layout reattivo e accenti di colori pastello. La barra di navigazione rimane nella parte superiore del riquadro di visualizzazione mentre l'utente scorre, migliorando l'usabilità per le pagine con un contenuto elevato. Include segnaposto per un logo o un titolo del sito e link di navigazione, con stile CSS Tailwind per un look moderno e pulito.
Componente di navigazione permanente
Un componente di navigazione appiccicoso con un design scheumorfico, una combinazione di colori triadici e un layout semplice, adatto per le interfacce dei social media. Supporta il design reattivo e il tema scuro.