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

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.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

RetroSidebarNavigation

Eine reaktionsschnelle, einfache Retro-/Pastell-Sidebar-Navigationskomponente für Geschäfts-/Unternehmenswebsites mit Unterstützung für den Dunkelmodus.

Offen

Navigationskomponente in der Seitenleiste

Eine reaktionsschnelle Navigationskomponente in der Seitenleiste mit 3D-Designelementen, einem analogen Farbschema und mittlerer Komplexität mit interaktiven Funktionen. Geeignet für Blog- oder Content-Websites.

Offen

Navigationskomponente in der Seitenleiste

Eine komplexe, reaktionsschnelle Navigationskomponente in der Seitenleiste für eine Marktplatz-Benutzeroberfläche mit lebendigen Farben und Unterstützung für den Dunkelmodus. Enthält mehrere Abschnitte, interaktive Elemente und ein Benutzerprofil.

Offen