Composants Hamburger Menu Brutalisme Hamburger Menu

Brutalisme Hamburger Menu

Composant de menu Hamburger inspiré du brutalisme pour le tableau de bord avec une palette de couleurs analogue, une complexité modérée, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.

Aperçu

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>

Composants associés

Composant du menu Hamburger

Un menu hamburger réactif conçu pour les interfaces de médias sociaux avec un thème en mode sombre et une palette de couleurs complémentaire.

Ouvrir

Menu de hamburger rétro E-commerce

Un composant de menu hamburger complexe, réactif et pris en charge par le mode sombre pour le commerce électronique, doté d’une esthétique rétro/vintage (années 80/90) et d’une palette de couleurs complémentaires (violet, cyan, or). Comprend la navigation principale, les liens de compte, le panier, la recherche et une bascule CSS pure à l’aide du hack de la case à cocher. Utilise les classes CSS Tailwind.

Ouvrir

Composant du menu Hamburger

Un composant réactif du menu Hamburger conçu dans le style brutalisme avec une palette de couleurs pastel. Convient pour un portfolio présentant des travaux ou des produits.

Ouvrir