Komponente der Navigationsleiste
Eine komplexe, reaktionsschnelle Navigationsleistenkomponente mit einer von Papier/Druck inspirierten Ästhetik und einem juwelenfarbenen Farbschema, das für Landwirtschafts-/Landwirtschafts-Websites geeignet ist. Enthält Unterstützung für den Dunkelmodus und mehrere interaktive Elemente.
HTML-Code
<header class="bg-emerald-700 font-serif shadow-xl dark:bg-emerald-950">
<nav class="container mx-auto px-4 py-3 md:flex md:items-center md:justify-between">
<div class="flex items-center justify-between">
<a href="#" class="flex items-center text-2xl font-bold text-white transition duration-300 ease-in-out hover:text-emerald-200 dark:text-emerald-50 dark:hover:text-emerald-300">
<img src="https://picsum.photos/id/1084/40/40" alt="Farm Logo" class="mr-2 rounded-full border-2 border-emerald-500 shadow-md dark:border-emerald-700">
AgriConnect
</a>
<button class="peer rounded-md p-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 md:hidden" type="button" aria-label="Toggle navigation">
<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 class="relative hidden flex-col transition-all duration-500 ease-in-out peer-focus:flex md:flex md:flex-row md:items-center md:space-x-8 lg:space-x-12">
<a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200" aria-current="page">Home</a>
<div class="group relative">
<button class="flex items-center rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 focus:outline-none dark:hover:bg-emerald-800 dark:hover:text-emerald-200" type="button">
Products
<svg class="ml-2 h-4 w-4 transform transition-transform duration-300 ease-in-out group-hover:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="absolute left-0 top-full hidden w-48 origin-top-right scale-y-0 transform rounded-md bg-emerald-600 shadow-lg transition-all duration-300 ease-in-out group-hover:scale-y-100 group-hover:block dark:bg-emerald-800">
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Seeds & Grains</a>
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Fertilizers</a>
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Equipment</a>
</div>
</div>
<div class="group relative">
<button class="flex items-center rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 focus:outline-none dark:hover:bg-emerald-800 dark:hover:text-emerald-200" type="button">
Services
<svg class="ml-2 h-4 w-4 transform transition-transform duration-300 ease-in-out group-hover:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="absolute left-0 top-full hidden w-48 origin-top-right scale-y-0 transform rounded-md bg-emerald-600 shadow-lg transition-all duration-300 ease-in-out group-hover:scale-y-100 group-hover:block dark:bg-emerald-800">
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Consultation</a>
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Soil Testing</a>
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Logistics</a>
</div>
</div>
<a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">Resources</a>
<a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">About Us</a>
<a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">Contact</a>
<div class="space-x-4 md:pl-4">
<button class="rounded-full bg-emerald-500 px-4 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:bg-emerald-700 dark:hover:bg-emerald-600" type="button">
<svg class="inline-block h-5 w-5 align-text-bottom" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V4a1 1 0 00-1-1H3zm2 1.5a.5.5 0 01.5-.5h9a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1zM5.5 9a.5.5 0 000 1h9a.5.5 0 000-1h-9z" clip-rule="evenodd"></path></svg>
Dashboard
</button>
</div>
</div>
</nav>
</header>
Verwandte Komponenten
Skeuomorphe Navigationsleiste
Eine Komponente der Portfolio-Navigationsleiste, die mit skeuomorphen Stilen und einem pastellfarbenen Farbschema entwickelt wurde, einschließlich Unterstützung für den Dunkelmodus. Es verfügt über interaktive Elemente wie Links und ein Dropdown-Menü.
Komponente der Navigationsleiste
Eine reaktionsschnelle Navigationsleisten-Komponente, die im Material Design-Stil mit triadischem Farbschema entworfen wurde, für Social-Media-Schnittstellen geeignet ist und Unterstützung für dunkle Themen bietet.
LuxusTravelNavBar
Eine einfache, elegante Navigationsleistenkomponente für Reise- und Tourismus-Websites mit luxuriösen Erdtönen, responsivem Design und Unterstützung für den Dunkelmodus.