Componenti Menù Hamburger Brutalismo Hamburger Menu

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.

Anteprima

Codice HTML

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

Componenti correlati

Componente del menu dell'hamburger

Un componente di menu per hamburger complesso, reattivo e vivace con microinterazioni per l'e-commerce, con una navigazione a scorrimento, collegamenti alle categorie, una barra di ricerca e icone dei social media. Supporta la modalità oscura e utilizza Lorem Picsum per le immagini.

Aperto

Componente del menu dell'hamburger

Componente del menu Hamburger reattivo con modalità oscura

Aperto

Componente del menu dell'hamburger

Un componente reattivo del menu dell'hamburger progettato in stile brutalismo con una combinazione di colori pastello. Adatto per un portfolio che mostra lavori o prodotti.

Aperto