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

Navigationskomponente der Seitenleiste - Graustufen

Responsive Navigationskomponente in der Seitenleiste

Offen

Navigationskomponente in der Seitenleiste

Eine einfache, reaktionsschnelle Seitenleistennavigation für Social-Media-Anwendungen, optimiert für den Dunkelmodus mit einem analogen Farbschema. Es enthält einen Profilbereich mit einem Avatar und einem Benutzernamen sowie Navigationslinks. Das Design verwendet Tailwind CSS für das Styling und die Reaktionsfähigkeit und bietet Unterstützung für den Dunkelmodus über das integrierte dark:-Präfix von Tailwind.

Offen

Brutalismus Seitenleisten-Navigation

Responsive Sidebar-Navigationskomponente mit Brutalismus-Design, lebendigem Farbschema und einfachem Layout für Blog-/Content-Zwecke. Enthält Unterstützung für den Dunkelmodus.

Offen