written by
Kevin Palombo

Comment ajouter un menu de navigation sur Webflow ?

Webflow 3 min
menu de navigation sur Webflow
Photo by Sharon McCutcheon on Unsplash

Presque tous les sites internet ont un menu de navigation. Très pratique, il permet aux les internautes une bonne navigation sur votre site (comme son nom le montre d’ailleurs). Mais la véritable question qui se pose est la suivante : comment ajouter un menu de navigation sur Webflow ?

3 étapes pour créer un menu de navigation sur Webflow

L’ajout de menu de navigation sur Webflow se fait en 3 étapes seulement :

  • Vous devez cliquer sur le bouton en forme de “+” sur la partie gauche (dans la barre latérale).
  • Dans cette barre, vous cherchez l’onglet : components.
  • Sous cet onglet, vous cliquez sur “menu de navigation”. Il sera tout de suite fonctionnel sur différentes versions d’écran (smartphone, tablette et ordinateur de bureau).

Et hop, vous avez réalisé un menu de navigation ! Il ne vous reste plus qu’à le personnaliser en fonction du design du site (le logo ou image à insérer, la couleur de l’arrière-plan, des textes, etc.). Pour cela, vous vous rendez sur la barre latérale droite. Je l’ai déjà expliqué dans un autre de mes articles sur le CSS : cette barre-là est dédiée aux CSS (couleur, taille de textes, typographie et bien d’autres).

Chaque page de votre menu devra encore être personnalisée. Ne vous découragez pas, cette étape ne vous prendra pas beaucoup de temps. Je vous montre une technique pour la réussir rapidement : donnez-leur un class. Tous les éléments appartenant à ce class seront automatiquement modifiés lorsque vous modifierez ce class lui-même (au lieu de le faire un par un).

Il y a une vidéo Youtube dans laquelle je décris cela en bas de l'article. Soutenez-moi en vous abonnant à la chaine YouTube "Happy Desk Design"

menu de navigation sur Webflow
Photo by Greyson Joralemon on Unsplash

Seulement, la création d’un menu est-elle obligatoire ?

Les avantages d’un menu de navigation ?

De nos jours, la mise en place de menu de navigation ne doit plus être une option, mais une nécessité. C’est devenu un standard dans les pratiques du web. Un menu de navigation détient effectivement un rôle bien précis : grâce à lui, un internaute peut facilement s’orienter, se déplacer et se repérer sur votre site.

En général, ces menus se placent en haut des pages. Cette position promet un gain de place non négligeable, c’est pourquoi dans mon exemple, j’ai décidé de vous montrer comment ajouter un menu de navigation sur Webflow en haut de la page. Si vous voulez plus de détails (un menu vertical, par exemple), je vous propose de suivre une formation complète en Webflow :)

Quoi qu’il en soit, un menu horizontal cadre mieux avec un design plus moderne et plus tendance. Il rassure aussi les internautes, car cela les préserve de leurs habitudes de navigation.

D’un autre côté, pour les propriétaires de site web, un menu de navigation sur Webflow en haut de page leur aide à mettre en valeur leurs produits, services… Ils sont tout de suite visibles, au premier coup d’oeil même.

menu de navigation sur Webflow
Photo by Denise Chan on Unsplash

Conseils supplémentaires

Si vous choisissez les menus de navigation horizontale, veillez bien à ce que le nombre de rubriques qu’ils contiennent soit raisonnable. En général, 8 éléments sont les maximums. Sinon, le design risque d’être compromis (et la visibilité des pages).

Par-dessus tout, un menu (quel que soit son type) se doit d’être cohérent avec le reste de la charte graphique d’un site web. D’ailleurs, n’est-ce pas le véritable rôle d’un webdesigner ?

menu de navigation sur Webflow
Photo by Robert Katzki on Unsplash

Conclusion
Bref, je ne vous ai donné que la base de la création de menus de navigation sur Webflow. Je vous invite toutefois à suivre ma formation pour des apprentissages plus détaillés à propos des menus sur Webflow :)

YouTube : Menu de navigation sur Webflow

Reviens sur cette page chaque fois que tu voudras. As-tu trouvé des idées que j'aurais oubliés? Si oui, quels sont-ils? Laisse un commentaire ci-dessous ou envoi un mail à hello@happydesk.be
Kevin Palombo, Gérant de Happydesk
Web Design Business