CCHub Logo CCHub Tailwind Collection
Komponenten Navigation in der Seitenleiste Navigationskomponente in der Seitenleiste

Navigationskomponente in der Seitenleiste

Eine reaktionsschnelle Navigationskomponente in der Seitenleiste, die im Brutalismus-Stil gestaltet ist und sich perfekt für E-Commerce-Anwendungen eignet. Es zeichnet sich durch lebendige Farben, hohen Kontrast und mehrere interaktive Elemente aus, darunter Links zu verschiedenen Einkaufskategorien, Benutzerkontooptionen und einen lebendigen Call-to-Action-Button für den Zugriff auf den Warenkorb. Das Design passt sich auch an den Dunkelmodus an.

Vorschau

HTML-Code 

<div class="flex flex-col w-64 h-screen p-4 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
    <h1 class="text-3xl font-bold text-vibrant-500 dark:text-vibrant-300">Shop Sidebar</h1>
    <ul class="mt-6 space-y-4">
        <li>  
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Products</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Categories</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Deals</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Account</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <a href="#" class="flex items-center justify-center h-12 bg-vibrant-500 text-white font-bold rounded-lg shadow-lg hover:bg-vibrant-600 transition ease-in-out duration-150">
            <span>View Cart</span>
        </a>
    </div>
    <div class="mt-auto">
        <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8 mr-3">
            <span>Profile</span>
        </a>
    </div>
</div>

Verwandte Komponenten

Navigationskomponente in der Seitenleiste

Eine komplexe, reaktionsschnelle Navigationskomponente in der Seitenleiste mit einem triadischen Farbschema und Farbverlaufsübergängen, die für eine Dashboard-Oberfläche entwickelt wurde. Enthält Unterstützung für den Dunkelmodus und mehrere interaktive Elemente.

Offen

Navigation in der Seitenleiste von Glassmorphism

Eine reaktionsschnelle Navigationskomponente in der Seitenleiste mit Glassmorphism-Design, Unterstützung für den Dunkelmodus und Verwendung von Tailwind CSS. Verfügt über mattglasähnliche, durchscheinende Elemente mit Unschärfeeffekten.

Offen

Navigationskomponente in der Seitenleiste

Eine auf Blogs zugeschnittene Navigationskomponente in der Seitenleiste, die mit 3D-Elementen und leuchtenden Farben gestaltet ist. Unterstützt den Dunkelmodus und ist reaktionsschnell mit einem einfachen Layout, das für den Konsum von Inhalten geeignet ist.

Offen