Componenti Menù Hamburger Componente del menu dell'hamburger

Componente del menu dell'hamburger

Un componente del menu dell'hamburger reattivo progettato per l'uso nella dashboard, disegnato in un design 3D con una combinazione di colori in scala di grigi, adatto sia per temi chiari che scuri.

Anteprima

Codice HTML

<div class="bg-gray-200 dark:bg-gray-800 transition duration-300 ease-in-out p-4 rounded-lg shadow-lg transform hover:scale-105">
    <div class="flex justify-between items-center">
        <div class="text-lg font-bold text-gray-800 dark:text-white">Dashboard</div>
        <button class="text-gray-800 dark:text-white focus:outline-none hover:text-gray-600 dark:hover:text-gray-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
        </button>
    </div>
    <nav class="mt-4">
        <ul class="space-y-2">
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Home</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Profile</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Settings</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Logout</a>
            </li>
        </ul>
    </nav>
</div>

Componenti correlati

Componente del menu dell'hamburger per cibo/ristorante (Memphis Pastel)

Un componente di menu per hamburger semplice e reattivo per siti Web di cibo/ristoranti, caratterizzato da un'estetica Memphis Design con colori pastello. Include il supporto per la modalità oscura.

Aperto

Componente del menu dell'hamburger 19

Un componente scheletrico del menu dell'hamburger progettato in stile scheumorfico, che imita gli elementi del mondo reale. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto

Brutalismo Hamburger Menu

Componente del menu dell'hamburger ispirato al brutalismo per dashboard con combinazione di colori analoga, complessità moderata, design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Niente JavaScript.

Aperto