Componente di navigazione della barra laterale - Scala di grigi
Componente di navigazione reattiva della barra laterale
Codice HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="flex flex-col w-64 bg-white dark:bg-gray-800 shadow-lg">
<div class="flex items-center justify-center h-16 shadow-md">
<span class="text-xl font-semibold text-gray-700 dark:text-white">Company Name</span>
</div>
<div class="flex flex-col flex-1 overflow-y-auto">
<nav class="flex-1 px-2 py-4 bg-gray-200 dark:bg-gray-700">
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
Dashboard
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
Projects
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Team
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.23-.14.447-.297.66-.48z"></path></svg>
Settings
</a>
</nav>
</div>
</div>
<!-- Main content (placeholder) -->
<div class="flex flex-col flex-1 overflow-y-auto">
<div class="h-16 bg-white dark:bg-gray-800 shadow-md"></div>
<div class="p-4">
<!-- Your main content goes here -->
</div>
</div>
</div>Componenti correlati
Componente di navigazione della barra laterale
Un componente di navigazione della barra laterale reattivo progettato in stile Brutalismo, perfetto per le applicazioni di e-commerce. Presenta colori vivaci, contrasto elevato e molteplici elementi interattivi, inclusi collegamenti a diverse categorie di shopping, opzioni di account utente e un vivace pulsante di invito all'azione per l'accesso al carrello. Il design si adatta anche alla modalità oscura.
Navigazione nella barra laterale di Glassmorphism
Un componente di navigazione reattivo della barra laterale in stile Glassmorphism per i portafogli, con supporto della modalità scura e combinazione di colori analoga. Presenta effetti di vetro smerigliato e più elementi interattivi utilizzando solo HTML e Tailwind CSS.
RetroSidebarNavigazione
Un componente di navigazione della barra laterale in stile retrò/vintage con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.