Composants Navigation dans la barre latérale Navigation dans la barre latérale

Navigation dans la barre latérale

Composant de navigation dans la barre latérale réactif avec jeu de couleurs analogues et micro-interactions, y compris la prise en charge du thème sombre.

Aperçu

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>

Composants associés

Organic_Nature_Sepia_Healthcare_Sidebar_Navigation_Component

Un composant de navigation latéral simple et réactif avec un design organique, inspiré de la nature, utilisant des tons sépia/brun, adapté aux applications médicales et de soins de santé. Inclut la prise en charge du mode sombre.

Ouvrir

Brutalisme Barre latérale Navigation

Un composant de navigation de barre latérale de style brutaliste avec des tons de terre, une complexité modérée, une réactivité et une prise en charge du mode sombre, conçu pour les sites de blogs/contenus utilisant Tailwind CSS.

Ouvrir

Navigation dans la barre latérale du commerce électronique

Un composant de navigation de barre latérale simple et réactif pour les sites Web de commerce électronique, doté d’un schéma de couleurs triadique, de micro-interactions au survol et de la prise en charge du mode sombre, conçu avec Tailwind CSS.

Ouvrir