Componenti Navigazione nella barra laterale Componente di navigazione della barra laterale

Componente di navigazione della barra laterale

Un componente di navigazione della barra laterale su misura per i blog, progettato con elementi 3D e colori vivaci. Supporta la modalità oscura ed è reattivo, con un layout semplice adatto al consumo di contenuti.

Anteprima

Codice HTML

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
            </a>
        </li>
    </ul>
</div>

Componenti correlati

Navigazione nella barra laterale

Componente di navigazione reattivo della barra laterale con combinazione di colori analogici e microinterazioni, incluso il supporto del tema scuro.

Aperto

RetroSidebarNavigazione

Un componente di navigazione della barra laterale in stile retrò/vintage con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto

Barra di navigazione laterale per l'e-commerce

Un componente di navigazione della barra laterale semplice e reattivo per siti Web di e-commerce, con una combinazione di colori triadica, microinterazioni al passaggio del mouse e supporto per la modalità scura, costruito con Tailwind CSS.

Aperto