Industrial_Monochromatic_Navigation
Un componente di navigazione complesso e focalizzato sulla modalità oscura per aziende industriali e manifatturiere, caratterizzato da un design monocromatico e da molteplici elementi interattivi adatti per dashboard e interfacce operative.
Codice HTML
<header class="bg-gray-950 dark:bg-gray-950 text-gray-200 dark:text-gray-200 shadow-md sticky top-0 z-50">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap md:flex-nowrap">
<!-- Logo & Brand Name -->
<div class="flex items-center flex-shrink-0 mr-6 mb-4 md:mb-0">
<svg class="h-8 w-8 mr-2 text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M9.504 1.134A1 1 0 0110 1h.496a1 1 0 01.496.504l.056.112.013.025.132.265.131.264.496.992.352.704.056.112.013.025.132.265.131.264.496.992.352.704a1 1 0 010 .984l-.352.704-.496.992-.131.264-.132.265-.013.025-.056.112-.352.704-.496.992-.131.264-.132.265-.013.025-.056.112a1 1 0 01-1.992 0l-.056-.112-.013-.025-.132-.265-.131-.264-.496-.992-.352-.704-.056-.112-.013-.025-.132-.265-.131-.264-.496-.992-.352-.704a1 1 0 010-.984l.352-.704.496-.992.131-.264.132-.265.013-.025.056-.112.352-.704.496-.992.131-.264.132-.265.013.025.056.112A1 1 0 019.504 1.134zM9.01 4.509a1 1 0 00-1.98 0l-.055.11-.013.027c-.122.247-.245.495-.367.742l-.244.492a1 1 0 000 .991l.244.492c.122.247.245.495.367.742l.013.027.055.11a1 1 0 001.98 0l.055-.11.013-.027c.122-.247.245-.495.367-.742l.244-.492a1 1 0 000-.991l-.244-.492c-.122-.247-.245-.495-.367-.742l-.013-.027-.055-.11zm-.056-.226l.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026a1 1 0 011.98 0l.013.026.059.119.006.012.006.012.013.026.059.119.006.012.006.012.013.026.059.119.006.012.006.012.013.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119c-.046-.093-.09-.187-.134-.281zm.056.226z" clip-rule="evenodd" />
</svg>
<span class="font-semibold text-xl tracking-tight text-blue-400 dark:text-blue-400">InnoManufac</span>
</div>
<!-- Mobile Menu Toggle -->
<div class="block md:hidden mb-4 md:mb-0">
<button class="navbar-toggler flex items-center px-3 py-2 border rounded text-gray-400 border-gray-600 hover:text-white hover:border-white"
onclick="document.getElementById('mobile-menu').classList.toggle('hidden'); document.getElementById('mobile-menu').classList.toggle('flex');">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<!-- Main Navigation Links (Desktop & Mobile) -->
<div id="mobile-menu" class="w-full flex-grow hidden md:flex md:items-center md:w-auto mt-4 md:mt-0 flex-col md:flex-row">
<div class="text-sm md:flex-grow flex flex-col md:flex-row items-center">
<a href="#dashboard" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
Dashboard
</a>
<a href="#operations" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
Operations
</a>
<a href="#analytics" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
Analytics
</a>
<a href="#maintenance" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
Maintenance
</a>
<a href="#inventory" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
Inventory
</a>
</div>
<!-- Search & User Profile -->
<div class="flex items-center flex-col md:flex-row">
<div class="relative mb-4 md:mb-0 md:mr-4 w-full md:w-auto">
<input type="search" placeholder="Search anything..." class="bg-gray-800 dark:bg-gray-800 text-gray-300 dark:text-gray-300 rounded-md py-2 pl-10 pr-4 block w-full leading-normal placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300 ease-in-out">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
</div>
<div class="flex items-center space-x-4">
<!-- Notifications Dropdown (example) -->
<div class="relative group">
<button class="text-gray-400 dark:text-gray-400 hover:text-white dark:hover:text-white p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
<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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a3 3 0 11-6 0m6 0v1h-6v-1m6 0H9"/></svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">3</span>
</button>
<div class="absolute right-0 mt-2 w-72 bg-gray-800 dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight">New sensor data critical anomaly</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight border-t border-gray-700 dark:border-gray-700">Maintenance scheduled for Line 3</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight border-t border-gray-700 dark:border-gray-700">Daily production report available</a>
</div>
</div>
<!-- User Profile Dropdown -->
<div class="relative group">
<button class="block w-10 h-10 rounded-full overflow-hidden border-2 border-gray-600 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-400 transition duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
</button>
<div class="absolute right-0 mt-2 w-48 bg-gray-800 dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700">Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-red-400 dark:text-red-400 hover:bg-gray-700 dark:hover:bg-gray-700 border-t border-gray-700 dark:border-gray-700 mt-1 pt-2">Sign out</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>Componenti correlati
Navigazione ispirata alla carta/stampa per piattaforme di intrattenimento
Un componente di navigazione semplice e reattivo per piattaforme di intrattenimento, che imita uno stile di carta/stampa con una tavolozza di colori verde foresta. Include il supporto per la modalità oscura e utilizza l'HTML semantico.
Componenti di miglioramento della navigazione
Un componente di navigazione in stile retrò/vintage progettato per il consumo di blog e contenuti con supporto per temi scuri.
Componente Componenti di miglioramento della navigazione
Un componente di navigazione complesso in stile brutalista per siti Web aziendali con combinazione di colori analoga, design reattivo e supporto per la modalità scura. Presenta layout insoliti e contrasto elevato.