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.
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
RetroPastelSocialSidebar
Eine einfache und reaktionsschnelle Navigationskomponente in der Seitenleiste mit Retro-/Vintage-Design der 80er/90er Jahre, Pastellfarben und Unterstützung für den Dunkelmodus, die für Social-Media-Schnittstellen mit Tailwind CSS entwickelt wurde.
Navigation in der Seitenleiste von Glassmorphism
Eine reaktionsschnelle Seitenleisten-Navigationskomponente im Glassmorphism-Stil für Portfolios mit Unterstützung des Dunkelmodus und analogem Farbschema. Mit Milchglaseffekten und mehreren interaktiven Elementen, die nur HTML und Tailwind CSS verwenden.
Navigationskomponente der Seitenleiste - Graustufen
Responsive Navigationskomponente in der Seitenleiste