Componente di navigazione permanente
Una barra di navigazione appiccicosa semplice, pulita e affidabile adatta per siti Web aziendali e professionali, in particolare bacheche di lavoro e piattaforme di carriera. Offre colori ad alto contrasto, reattività e supporto per la modalità oscura.
Codice HTML
<nav class="sticky top-0 z-50 bg-white shadow-md dark:bg-gray-800 transition duration-300">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<!-- Logo/Brand Name -->
<a href="#" class="text-2xl font-bold text-blue-700 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition duration-200">
JobBoard
</a>
<!-- Navigation Links - Desktop -->
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Jobs</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Companies</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Candidates</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">About Us</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Contact</a>
</div>
<!-- Action Buttons - Desktop -->
<div class="hidden md:flex space-x-4">
<a href="#" class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
Sign In
</a>
<a href="#" class="px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
Post a Job
</a>
</div>
<!-- Mobile Menu Button (Hamburger) -->
<div class="md:hidden">
<button type="button" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Toggle menu">
<svg class="h-6 w-6" 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>
</div>
<!-- Mobile Menu (Hidden by default, shown by JS in a real app) -->
<div class="md:hidden flex flex-col space-y-2 p-4 border-t border-gray-200 dark:border-gray-700" style="display: none;">
<a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Jobs</a>
<a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Companies</a>
<a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Candidates</a>
<a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">About Us</a>
<a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Contact</a>
<a href="#" class="block px-4 py-2 rounded-md border border-gray-300 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 text-center transition duration-200 mt-2">Sign In</a>
<a href="#" class="block px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">Post a Job</a>
</div>
</nav>Componenti correlati
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 progettato per la modalità oscura con effetti reattivi utilizzando Tailwind CSS.
Retro_Vintage_Sticky_Navigation_Component
Una complessa barra di navigazione appiccicosa di ispirazione retrò/vintage progettata per siti Web di eventi o conferenze, caratterizzata da una morbida combinazione di colori pastello, piena reattività e supporto per la modalità scura. Include un logo, link di navigazione, un pulsante di invito all'azione e un'icona di ricerca.