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

Navigation in der Seitenleiste

Responsive Navigationskomponente in der Seitenleiste mit analogem Farbschema und Mikrointeraktionen, einschließlich Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="flex h-screen bg-gray-100 dark:bg-gray-800">

    <!-- Sidebar -->
    <div class="w-64 bg-teal-500 dark:bg-teal-700 text-white flex flex-col">
        <div class="p-4 text-center text-2xl font-bold">Dashboard</div>
        <nav class="mt-6">
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Home</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Analytics</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Reports</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Settings</a>
        </nav>
    </div>

    <!-- Content area -->
    <div class="flex-1 p-10 text-gray-800 dark:text-gray-200">
        <h1 class="text-3xl font-bold mb-6">Welcome to the Dashboard</h1>
        <p>This is the main content area.</p>
    </div>

</div>

Verwandte Komponenten

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.

Offen

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.

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