Comment créer un mega menu dynamique lié au CMS Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un mega menu dynamique alimenté par le CMS Webflow, pour que vos liens de navigation se mettent à jour automatiquement.

1. Créez votre collection CMS de navigation

Créez une collection "Navigation" avec les champs : Nom (texte), URL (texte), Catégorie (Option ou Reference), Ordre (Nombre). Renseignez tous vos liens de navigation dans cette collection.

2. Ajoutez une Collection List dans votre Navbar

Dans le Designer, ouvrez votre Navbar. Ajoutez une Collection List dans le conteneur de votre mega menu. Liez-la à votre collection Navigation. Triez par le champ Ordre croissant. Réglez la limite d'items selon vos besoins.

3. Groupez par catégorie

Pour organiser votre mega menu en colonnes par catégorie, créez une collection pour chaque catégorie et ajoutez une Collection List par catégorie dans votre mega menu. Filtrez chaque liste sur sa catégorie respective via les paramètres de filtrage de la Collection List.

4. Gérez l'ouverture et la fermeture

Utilisez les Interactions Webflow pour gérer l'affichage du mega menu au hover, comme décrit dans notre tutoriel mega menu Webflow. Le CMS ne change pas le comportement d'ouverture, uniquement le contenu affiché.

Conclusion

Un mega menu CMS élimine les mises à jour manuelles de navigation. Cas d'usage :

• Sites avec navigation par catégories de produits ou services
• Portails avec de nombreuses rubriques
• Sites multilingues avec navigation localisée via CMS