CCHub Logo CCHub Tailwind Collection
Komponenten Hamburger Menü Brutalismus Hamburger Menü

Brutalismus Hamburger Menü

Vom Brutalismus inspirierte Hamburger-Menükomponente für Dashboard mit analogem Farbschema, mäßiger Komplexität, responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS. Kein JavaScript.

Vorschau

HTML-Code 

<div class="bg-gray-200 dark:bg-gray-800 font-mono">
  <div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center">
      <div class="text-xl font-bold text-gray-900 dark:text-gray-100">Dashboard</div>
      <button class="text-gray-900 dark:text-gray-100 focus:outline-none lg:hidden">
        <svg class="h-6 w-6" 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 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>

    <div class="hidden lg:block mt-4">
      <nav class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Analytics</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Reports</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Settings</a>
      </nav>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default) -->
  <div class="fixed inset-0 bg-gray-200 dark:bg-gray-800 z-50 hidden">
    <div class="flex justify-end p-4">
      <button class="text-gray-900 dark:text-gray-100 focus:outline-none">
        <svg class="h-6 w-6" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <nav class="flex flex-col items-center mt-8 space-y-4">
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Analytics</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Reports</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Settings</a>
    </nav>
  </div>
</div>

Verwandte Komponenten

Hamburger Menükomponente für Essen/Restaurant (Memphis Pastell)

Eine einfache, reaktionsschnelle Hamburger-Menükomponente für Food-/Restaurant-Websites mit einer Memphis Design-Ästhetik mit Pastellfarben. Enthält Unterstützung für den Dunkelmodus.

Offen

Hamburger-Menü-Komponente

Eine reaktionsschnelle Hamburger-Menükomponente, inspiriert von Memphis Design mit einem sepiabraunen Farbschema, geeignet für Unterhaltungs-/Medienplattformen. Es verfügt über Unterstützung für den Dunkelmodus und verspielte geometrische Akzente.

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