JetMenu : créer un mega menu avancé avec Elementor

Pourquoi les menus natifs WordPress ne suffisent pas

Le menu de navigation natif WordPress est limité à une structure hiérarchique de liens texte. Pour les sites avec de nombreuses pages ou catégories, ce format devient rapidement illisible. JetMenu résout ce problème : vous designez les sous-menus directement dans Elementor — colonnes, images, descriptions, badges « Nouveau », icônes, et même des widgets Elementor complets.

Comment fonctionne JetMenu

JetMenu s’active dans le menu de navigation WordPress standard. Pour chaque élément de menu, vous basculez en mode « mega menu » et accédez à l’éditeur Elementor pour designer le contenu du sous-menu. Largeur, déclenchement (hover ou clic), et animation d’ouverture sont configurables.

Cas d’usage les plus courants

E-commerce : mega menu 3 à 4 colonnes — catégories avec images, « Nouveautés » avec photos produits, « Promotions » avec badge %, colonne « Services » (livraison, retours, garantie). Peut multiplier par 2 à 3 les clics vers les pages catégories.

Site agence : mega menu avec icônes et descriptions pour chaque service, bloc « Études de cas » avec miniatures, et CTA « Discutons de votre projet ». Le visiteur comprend l’offre complète dès la navigation.

Site éditorial : sous-catégories avec image de couverture, et colonne « Les plus lus » avec les 3 derniers articles via Dynamic Tags JetEngine.

Configuration pas à pas

  1. Installez et activez JetMenu depuis votre licence Crocoblock
  2. Allez dans Apparence → Menus et sélectionnez votre menu principal
  3. Cliquez sur l’icône JetMenu sur l’élément parent (ex : « Services »)
  4. Activez « Mega Menu » et cliquez sur « Edit Mega Menu »
  5. L’éditeur Elementor s’ouvre — designez le sous-menu comme une section de page
  6. Sauvegardez et testez sur votre site

JetMenu vs Max Mega Menu

Des plugins comme Max Mega Menu existent mais ont un éditeur propriétaire limité. JetMenu utilise directement l’éditeur Elementor — vous avez accès à tous vos widgets, Dynamic Tags, et styles globaux. Si vous êtes sur l’écosystème Crocoblock, JetMenu est la solution la plus cohérente.

Retour au guide Crocoblock pour Elementor

FAQ — JetMenu et Mega Menu Elementor

JetMenu fonctionne-t-il avec le Theme Builder Elementor Pro (Header Builder) ? Oui, et c’est même la configuration recommandée. Vous créez votre header avec le Theme Builder Elementor Pro, ajoutez le widget Nav Menu dans le header, et JetMenu enrichit ce menu avec ses mega menus. Le mega menu s’intègre parfaitement dans le header Elementor, adapté en responsive et sticky. Pour les headers sur-mesure (sticky, transparent, dark mode), le combo Theme Builder + JetMenu est la solution la plus flexible.

Peut-on afficher des contenus dynamiques JetEngine dans un mega menu JetMenu ? Oui. Dans l’éditeur Elementor du mega menu, vous pouvez utiliser le Listing Grid JetEngine pour afficher les derniers articles, les produits phares, ou tout autre contenu dynamique. Vous pouvez aussi utiliser les Dynamic Tags JetEngine dans les widgets Elementor du mega menu. Exemple : colonne « Nos dernières réalisations » avec un Listing Grid des 3 derniers projets CPT.

JetMenu est-il accessible (accessibilité web / WCAG) ? JetMenu supporte la navigation au clavier sur les mega menus (Tab, Entrée, Echap). La compatibilité avec les lecteurs d’écran dépend de la structure HTML que vous créez dans l’éditeur Elementor du sous-menu. Pour une accessibilité optimale, utilisez des listes HTML sémantiques pour les liens de navigation, des attributs aria-label, et testez avec des outils comme Lighthouse → Accessibilité.

Comment configurer le mega menu JetMenu sur mobile ? JetMenu propose un mode mobile séparé du mode desktop. Sur mobile, le mega menu peut se transformer en menu hamburger standard, en menu drawer latent, ou en accordéon vertical. Vous configurez séparément le comportement mobile dans les paramètres JetMenu. Il est recommandé de créer un template de mega menu simplifié pour mobile — moins de colonnes, plus de liens texte directs, sans images.

JetMenu impact-il les performances du site sur mobile ? Oui, potentiellement. Les mega menus chargent leurs CSS et HTML dans le DOM même quand fermés. Sur mobile, ce HTML supplémentaire peut augmenter le First Contentful Paint. Pour minimiser l’impact : (1) utilisez des images légères WebP dans le mega menu, (2) évitez les animations complexes sur mobile, (3) configurez le lazy loading des images du mega menu. Testez le score PageSpeed mobile avant et après intégration de JetMenu.

Autres ressources Elementor

Crocoblock : est-ce que ça vaut le prix ? Avis après 140 missions

Crocoblock vaut-il 199$/an ? Avis honnête après 140 missions Elementor Pro avec et sans Crocoblock : avantages, limites, retour sur investissement réel....

Cahier des charges pour un site Elementor Pro : modèle gratuit

Comment rédiger un cahier des charges pour un site web WordPress Elementor Pro ? Modèle gratuit avec toutes les sections indispensables....

Données structurées Schema.org sur Elementor : comment les implémenter

Comment implémenter les données structurées Schema.org sur un site Elementor Pro ? Rank Math, JSON-LD, types de schema et vérification avec Google....

JetBooking : système de réservation avec Elementor

JetBooking permet de créer un système de réservation complet avec Elementor Pro et JetEngine : calendrier, disponibilités, paiements. Guide complet....

Le Form Builder Elementor Pro : créer des formulaires avancés

Le Form Builder Elementor Pro permet de créer des formulaires avancés : champs conditionnels, multi-étapes, intégrations CRM. Guide complet avec exemples....

Site médical ou paramédical avec Elementor : contraintes et solutions

Créer un site médical ou paramédical avec Elementor Pro : conformité RGPD, RGAA, prise de RDV en ligne, contraintes légales. Guide complet....