Componenti Navigazione nella barra laterale Componente di navigazione della barra laterale

Componente di navigazione della barra laterale

Un componente di navigazione reattivo della barra laterale con elementi di progettazione 3D, una combinazione di colori analoga e una complessità media con funzionalità interattive. Adatto per blog o siti Web di contenuti.

Anteprima

Codice HTML

<!-- Responsive Sidebar Navigation Component -->
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">

    <!-- Sidebar -->
    <div class="bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-700 dark:to-purple-900 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out shadow-lg">
        <div class="text-white flex items-center justify-between px-4">
            <span class="text-2xl font-extrabold italic">Blog Menu</span>
            <!-- Mobile menu button -->
            <button class="text-white focus:outline-none md:hidden" onclick="document.querySelector('.translate-x-full').classList.toggle('translate-x-full');">
                <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>

        <!-- Nav Links -->
        <nav>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-home mr-3"></i> Home
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-th-large mr-3"></i> Categories
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-bookmark mr-3"></i> Bookmarks
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-user mr-3"></i> Profile
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md">
                <i class="fas fa-cog mr-3"></i> Settings
            </a>
        </nav>

        <!-- Footer/User Info (Optional) -->
        <div class="absolute inset-x-0 bottom-0 p-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-white mr-3">
                <div class="text-sm">
                    <p class="font-semibold">John Doe</p>
                    <p class="text-gray-200 dark:text-gray-400">View Profile</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 p-10 text-2xl font-bold">
        <!-- Your main content goes here -->
        Main Content
    </div>
    
</div>

Componenti correlati

Componente di navigazione della barra laterale

Un componente di navigazione della barra laterale complesso e reattivo per un'interfaccia utente del marketplace, con colori vivaci e supporto per la modalità scura. Include più sezioni, elementi interattivi e profilo utente.

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

Componente di navigazione della barra laterale

Un componente di navigazione della barra laterale semplice e reattivo con uno stile di design industriale, una combinazione di colori neutri caldi e supporto per la modalità scura, adatto per applicazioni di criptovaluta/blockchain.

Aperto