CCHub Logo CCHub Tailwind Collection
Komponenten Navigationsleiste Komponente der Navigationsleiste

Komponente der Navigationsleiste

Eine reaktionsschnelle Navigationsleiste mit ansprechenden Mikrointeraktionen, die für den E-Commerce entwickelt wurde, mit einem dunklen Thema und Erdtönen.

Vorschau

HTML-Code 

<nav class="bg-brown-800 text-white dark:bg-brown-900 shadow-lg">
    <div class="container mx-auto flex justify-between items-center p-4">
        <a href="#" class="text-2xl font-bold hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Shop</a>
        <div class="hidden md:flex space-x-8">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">
                <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full">
            </a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Cart</a>
        </div>
        <button class="md:hidden text-brown-200 hover:text-brown-500 dark:hover:text-brown-300 transition-colors focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/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>
</nav>

<!-- Responsive adjustments for mobile -->
<div class="md:hidden">
    <ul class="bg-brown-800 text-white dark:bg-brown-900 p-4 space-y-2">
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a></li>
    </ul>
</div>

Verwandte Komponenten

Neon_Glow_Navbar_Music_Audio

Eine komplexe, reaktionsschnelle Navigationsleistenkomponente für Musik-/Audioplattformen mit Neon-/Leuchteffekten und einem warmen, neutralen Farbschema. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente.

Offen

Farbverlauf/Farbübergänge Navigationsleiste des Graustufen-Dashboards

Eine komplexe, reaktionsschnelle Navigationsleiste für ein Dashboard mit Verlaufsübergängen in einem Graustufen-Farbschema. Enthält mehrere interaktive Elemente und vollständige Unterstützung des Dunkelmodus.

Offen

Skeuomorphe Navigationsleiste

Eine einfache, reaktionsschnelle Navigationsleiste für soziale Medien mit einem skeuomorphen Designstil, der ein analoges Farbschema verwendet und den Dunkelmodus unterstützt.

Offen