Navigazione sui social media
Un componente di navigazione per social media pulito e minimalista con una tavolozza verde bosco, progettato per layout reattivi e modalità scura. Dispone di una navigazione principale, un profilo utente e una ricerca.
Codice HTML
<nav class="bg-emerald-50 dark:bg-gray-900 shadow-sm dark:shadow-lg transition-colors duration-300 md:sticky md:top-0 md:z-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-3 flex flex-col md:flex-row items-center justify-between">
<!-- Logo/Brand Name -->
<div class="flex items-center justify-between w-full md:w-auto mb-3 md:mb-0">
<a href="#" class="text-xl md:text-2xl font-bold text-emerald-800 dark:text-emerald-300 tracking-tight flex items-center group">
<svg class="h-7 w-7 md:h-8 md:w-8 mr-2 text-emerald-600 dark:text-emerald-400 group-hover:rotate-12 transition-transform duration-300" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.181-.018-.359-.05-.532a2.997 2.997 0 01-2.976-2.976 2.997 2.997 0 01-2.976 2.976 2.997 2.997 0 01-2.976-2.976A2.997 2.997 0 01-2.976 2.976 2.997 2.997 0 01-2.976 2.976-.05-.532C2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976Z" style="transform: scaleX(-1) translate(24px, 0)"></path>
</svg>
Connectify
</a>
<!-- Mobile Menu Button (Hamburger) -->
<button class="md:hidden flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md" aria-label="Toggle navigation menu">
<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 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<!-- Main Navigation & Search (Hidden on Mobile by default, can be toggled via JS) -->
<div class="hidden md:flex flex-col md:flex-row items-center flex-grow w-full md:w-auto" id="main-nav-menu">
<ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 lg:space-x-12 mr-0 md:mr-8 lg:mr-12 text-center md:text-left w-full md:w-auto">
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
<svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-400" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
Home
</a>
</li>
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
<svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-400" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Messages
</a>
</li>
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
<svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-400" 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 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
Notifications
<span class="ml-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-red-500 text-white dark:bg-red-600">3</span>
</a>
</li>
</ul>
<div class="relative w-full md:w-64 lg:w-80 mt-4 md:mt-0">
<input type="text" placeholder="Search Connectify..." class="w-full py-2 pl-10 pr-4 rounded-full bg-emerald-100 dark:bg-gray-800 text-emerald-800 dark:text-emerald-100 placeholder-emerald-500 dark:placeholder-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 text-sm md:text-base transition-all duration-200 border border-emerald-200 dark:border-gray-700">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-emerald-500 dark:text-emerald-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
</div>
<!-- User Profile & Settings -->
<div class="flex items-center space-x-4 mt-3 md:mt-0 ml-0 md:ml-8 lg:ml-12">
<button aria-label="User profile settings" class="hidden sm:block">
<img class="h-9 w-9 md:h-10 md:w-10 rounded-full object-cover ring-2 ring-emerald-300 dark:ring-emerald-600 hover:ring-emerald-500 dark:hover:ring-emerald-400 transition-all duration-200" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
</button>
<button class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md p-1 md:p-2" aria-label="More options">
<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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
</button>
</div>
</div>
</nav>Componenti correlati
Componente di navigazione minimalista Earth Tones
Un componente di navigazione dal design minimalista e piatto con una combinazione di colori color terra, adatto per siti Web di consulenza/servizi. Include un design reattivo per desktop, tablet e dispositivi mobili e supporta la modalità oscura.
Componente di navigazione Brutalismo
Un componente di navigazione reattivo progettato in stile brutalista, che mostra una combinazione di colori monocromatica, ideale per un sito web portfolio. Le caratteristiche includono un layout audace con contrasto elevato, supporto della modalità oscura utilizzando Tailwind CSS ed elementi interattivi come menu a discesa o collegamenti ai pulsanti.
Barra di navigazione retrò per l'e-commerce
Un componente di navigazione in scala di grigi in stile retrò/vintage per l'e-commerce, caratterizzato da una complessità moderata con elementi interattivi come passaggi del mouse e menu a discesa. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.