CCHub Logo CCHub Tailwind Collection
Komponenten Hamburger Menü Hamburger-Menü-Komponente

Hamburger-Menü-Komponente

Eine reaktionsschnelle Hamburger-Menükomponente, die für die Verwendung im Dashboard entwickelt wurde und in einem 3D-Design mit einem Graustufen-Farbschema gestaltet ist, das sowohl für helle als auch für dunkle Themen geeignet ist.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Hamburger-Menü-Komponente

Eine komplexe, reaktionsschnelle Hamburger-Menükomponente mit Glassmorphism-Design und einem mattglasähnlichen transluzenten Effekt, der sich für ein Portfolio eignet, in dem Arbeiten oder Produkte präsentiert werden. Es enthält eine Unterstützung für dunkle Themen und verwendet Tailwind CSS für das Styling.

Offen

Hamburger-Menü-Komponente

Responsive Hamburger Menükomponente mit Dunkelmodus

Offen

Hamburger-Menü-Komponente

Eine komplexe, reaktionsschnelle und lebendige Hamburger-Menükomponente mit Mikrointeraktionen für den E-Commerce, mit einer ausziehbaren Navigation, Kategorielinks, einer Suchleiste und Social-Media-Symbolen. Es unterstützt den Dunkelmodus und verwendet Lorem Picsum für Bilder.

Offen