Comment créer un mega menu dynamique lié au CMS Webflow ?
Apprenez à créer un mega menu dynamique alimenté par le CMS Webflow pour une navigation qui se met à jour automatiquement.
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.
| Approche | Avantage | Limite |
|---|---|---|
| Collection List dans la Navbar | Dynamique, se met à jour automatiquement | Styles limités, pas de mise en page complexe |
| Embed avec Collection List | Plus de contrôle | Nécessite un embed dans la navbar |
| CMS + JS (fetch API) | Totalement flexible | Complexité technique élevée |
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
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
