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

Eine reaktionsschnelle Hamburger-Menükomponente, die im Brutalismus-Stil mit Tailwind CSS gestaltet wurde, mit Unterstützung für den Dunkelmodus und Platzhaltern für Bilder und Avatare.

Offen

Hamburger-Menü-Komponente

Eine minimalistische/flache Design-Responsive-Hamburger-Menükomponente, die für Geschäfts-/Unternehmenswebsites geeignet ist, ein Pastellfarbschema verwendet und den Dunkelmodus unterstützt.

Offen

Retro E-Commerce Hamburger Menü

Eine komplexe, reaktionsschnelle, vom Dark-Mode unterstützte Hamburger-Menükomponente für den E-Commerce, die mit einer Retro-/Vintage-Ästhetik (80er/90er Jahre) und einem komplementären Farbschema (Lila, Cyan, Gold) gestaltet ist. Verfügt über Hauptnavigation, Kontolinks, Warenkorb, Suche und einen reinen CSS-Schalter mit dem Kontrollkästchen-Hack. Verwendet Tailwind CSS-Klassen.

Offen