Composants Méga Menu Composant Mega Menu

Composant Mega Menu

Méga composant de menu avec conception matérielle, schéma de couleurs triadique, niveau complexe, à des fins de tableau de bord, réactif avec prise en charge du thème sombre.

Aperçu

HTML Code

<nav class="bg-gray-100 dark:bg-gray-900 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div>
        <a href="#" class="text-gray-800 dark:text-white text-xl font-bold">Dashboard</a>
      </div>
      <div class="hidden md:flex space-x-4">
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Analytics</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Overview</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Reports</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Data Sources</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Users</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Manage Users</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Roles & Permissions</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Settings</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">General Settings</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Billing</a>
          </div>
        </div>
      </div>
      <div class="md:hidden">
        <button class="text-gray-800 dark:text-white focus:outline-none">
          <svg class="w-6 h-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-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Composants associés

Composant Mega Menu

Un composant de méga menu de style Neumorphisme avec une palette de couleurs monochromatiques conçu pour les blogs et la consommation de contenu. Il prend en charge la conception réactive avec le mode sombre.

Ouvrir

Composant Mega Menu

Un composant de méga menu réactif conçu avec un look 3D, y compris des effets de profondeur et la prise en charge du thème sombre à l’aide de Tailwind CSS. Le composant présente des images et des avatars d’utilisateurs provenant de services d’espace réservé.

Ouvrir

Composant Mega Menu

Un composant de méga menu de style neumorphique pour un site de portfolio, conçu avec un schéma de couleurs en niveaux de gris et une prise en charge réactive du thème sombre à l’aide de Tailwind CSS.

Ouvrir