Navegación en la barra lateral
Componente de navegación de barra lateral receptivo con esquema de color analógico y microinteracciones, incluido el soporte de tema oscuro.
Código HTML
<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>Componentes relacionados
Componente de navegación de la barra lateral de redes sociales
Componente de navegación de barra lateral de redes sociales receptivo con soporte de tema oscuro que usa brutalismo, tonos de tierra y principios de diseño complejos. No se necesita JavaScript.
RetroSidebarNavigation
Un componente de navegación de barra lateral retro/vintage retro/vintage receptivo, sencillo, para sitios web empresariales/corporativos, con soporte para modo oscuro.
Glassmorphism Sidebar Navigation
Una barra de navegación lateral de Glassmorphism compleja y receptiva para un tablero con un esquema de color complementario, compatibilidad con modo oscuro y sin JavaScript.