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 einfache und reaktionsschnelle Navigationskomponente in der Seitenleiste, die für Dashboards entwickelt wurde, mit ansprechenden Animationen und einem erdigen Farbschema. Es unterstützt den Dunkelmodus.

Offen

Navigationskomponente in der Seitenleiste

Responsive Sidebar-Navigationskomponente mit Unterstützung für den Dunkelmodus. Minimalistisches/flaches Design, monochromatisches Farbschema, komplexe Benutzeroberfläche für Portfolios. Verwendet Tailwind CSS, picsum.photos und randomuser.me. Kein JavaScript.

Offen

Navigation in der Seitenleiste von Glassmorphism

Eine reaktionsschnelle Navigationskomponente in der Seitenleiste mit Glassmorphism-Design, Unterstützung für den Dunkelmodus und Verwendung von Tailwind CSS. Verfügt über mattglasähnliche, durchscheinende Elemente mit Unschärfeeffekten.

Offen