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

Gaming_Sidebar_Navigation_Component

Eine reaktionsschnelle Navigationskomponente in der Seitenleiste für Gaming-Websites mit einem von Monospace/Entwicklern inspirierten Design mit hohem Kontrast, Unterstützung für den Dunkelmodus und interaktiven Elementen. Ideal für Spieloberflächen und Community-Portale.

Offen

Navigationskomponente der Seitenleiste - Graustufen

Responsive Navigationskomponente in der Seitenleiste

Offen

Navigationskomponente für die Social-Media-Seitenleiste

Responsive Social-Media-Sidebar-Navigationskomponente mit Unterstützung für dunkle Themen unter Verwendung von Brutalismus, Erdtönen und komplexen Designprinzipien. Kein JavaScript erforderlich.

Offen