La navigation est l'un des facteurs incontournables de la réussite d'un site web. Les différents éléments du site doivent être liés entre eux afin que les internautes puissent le visiter de manière fluide. Le menu de navigation permet de les guider dans leur recherche d'informations sur les pages du site. C'est un élément essentiel pour améliorer l'expérience utilisateur.

Téléchargement  >> L'outil gratuit pour évaluer les performances de son site web

6 types de menus de navigation

Le menu de navigation est affiché à différents emplacements du site web : en haut, en bas ou sur les côtés de la page. En fonction du contenu et du design offerts par le site, il se décline donc sous différentes formes :

  1. Le menu de navigation classique.
  2. Le menu side-bar.
  3. Le menu hamburger.
  4. Le menu déroulant.
  5. Le menu sticky.
  6. Le menu de navigation du footer.

 

1 - Le menu de navigation classique

Ce menu de navigation est le plus couramment utilisé pour les sites web. Il est positionné en haut de page et prend la forme d'une liste horizontale. Principal point d'accès à l'ensemble du site, il propose des liens qui renvoient les internautes vers toutes les pages de celui-ci. Le menu de navigation classique est une solution particulièrement pratique pour les concepteurs qui souhaitent créer un site garantissant un accès égal à l'ensemble des pages web.

Exemple de menu de navigation classique :

Exemple menu de navigation betomorrow

 

2 - Le menu side-bar

Le menu side-bar, appelé également barre latérale, correspond au menu situé à gauche ou à droite d'une page de site web. Dans ce menu, toutes les pages web sont listées et classées de manière précise. En effet, le menu side-bar comporte des éléments que les internautes décideront de consulter ou non selon leur importance. C'est pourquoi une attention particulière doit être portée à l'ordre dans lequel les pages web sont listées. De plus, bien que le menu side-bar permette d'utiliser un large nombre de sections, il est conseillé de se limiter à 9 sections principales pour un accès de premier niveau. De cette façon, le menu sera visible pour les internautes sans qu'ils aient besoin de défiler vers le bas.

Exemple de menu side-bar :

Exemple menu de navigation rogue studio

 

3 - Le menu hamburger

L'utilisation du menu hamburger, ou burger, connaît une véritable popularité depuis ces dernières années. Il s'agit d'une icône représentée sous forme de 3 lignes horizontales rappelant un sandwich qui permet aux utilisateurs d'afficher un menu lorsqu'ils cliquent dessus. Le menu hamburger est notamment utilisé pour la navigation sur les sites et applications mobiles.

Exemple de menu hamburger :

Exemple menu de navigation Havas 1

Exemple menu de navigation Havas 2

 

4 - Le menu déroulant

Le menu déroulant propose aux internautes une liste d'options qui s'affiche lorsqu'ils cliquent sur un élément ou le survolent. Fréquemment utilisé pour les pages d'accueil et les sections achat, il permet de naviguer d'une page à l'autre en fonction de nombreux critères, mais aussi de visualiser les différents contenus d'un site web en un coup d'œil. Le menu déroulant est idéal pour les sites qui offrent un contenu très développé.

Exemple de menu déroulant :

Exemple menu de navigation Kramp

 

5 - Le menu sticky

Le sticky est une fonction qui peut être appliquée sur les menus de navigation. Il permet une navigation fluide et favorise la rétention des utilisateurs sur un site web. Il trouve notamment toute son efficacité sur les menus contextualisés. Le menu sticky, également connu sous le nom de menu fixe ou flottant, désigne un menu qui s'immobilise lorsque les internautes vont scroller une page web, c'est-à-dire la faire défiler vers le bas. Il convient parfaitement aux sites dotés d'une seule page.

Exemple de menu sticky :

Exemple menu de navigation blueway

 

6 - Le menu de navigation du footer

Le pied de page d'un site web peut aussi comporter un menu de navigation. Cela permet aux concepteurs de partager des liens qu'ils ne souhaitent pas voir apparaitre dans le menu du haut de la page au risque de l'encombrer. Le footer peut se composer de différents éléments :

  • Les mentions légales.
  • Le plan du site.
  • Les valeurs de la marque.
  • Des boutons de réseaux sociaux.
  • Des call-to-action.
  • Un formulaire de newsletter.
  • Un moteur de recherche.

Grâce à un maillage interne efficace, le menu de navigation du pied de page contribue à optimiser le référencement naturel du site web.

Exemple de menu de navigation de footer :

Exemple menu de navigation footer

 

Comment choisir son menu de navigation à utiliser pour son site web ?

 

L'emplacement

 

L'un des principaux critères à prendre en considération est l'emplacement du menu de navigation. L'important est de choisir celui qui est le plus adapté. Il est possible de combiner toutes les dispositions, mais attention aux redondances. Le but est de veiller à ce que le menu soit facilement lisible pour les utilisateurs.

 

Le choix des mots

Choisir les mots à utiliser pour le menu est capital pour que les internautes comprennent directement ce que le site web leur offre. Les termes sélectionnés doivent expliquer précisément l'activité de la marque. Il faut aussi penser à déterminer leur nombre. L'idéal est d'opter pour un seul mot par catégorie.

 

Le nombre de liens

Il est recommandé de limiter le nombre de liens dans le menu de navigation afin que les utilisateurs puissent s'y retrouver facilement et sachent quelles pages ils vont consulter. En général, le nombre idéal de catégories est de 7 au maximum.

Certains menus sont à exclure comme les menus horizontaux à plusieurs lignes ou les menus verticaux nécessitant un long défilement. Pour répondre à ces principes, il est essentiel de créer des sous-rubriques et d'insérer des liens dans le pied de page. Il faut aussi veiller à ce que le menu ne soit pas redondant. Selon l'activité de l'entreprise, certains liens ne seront pas nécessaires au menu de navigation principal.

 

L'ordre d'affichage des liens

L'ordre dans lequel les liens vont être affichés doit également être bien pensé. Les liens concernant les pages principales du site web, c'est-à-dire celles qui portent sur le cœur d'activité de la marque, doivent être positionnés en premier. Dans le menu de navigation, les pages « contact » et « nous trouver » sont à afficher en dernier.

 

L'efficacité des liens

Il est crucial de s'assurer de la popularité des pages web mises en évidence dans le menu de navigation. Pour cela, il suffit de consulter les statistiques de fréquentation du site pour évaluer l'efficacité des liens.

 

La cohérence entre les pages du site

Le menu de navigation doit conserver la même structure d'une page à l'autre du site. Une telle cohérence apporte un sentiment de confiance aux internautes lorsqu'ils visitent un site web, améliorant ainsi l'expérience utilisateur. Pour communiquer des informations supplémentaires sur certaines pages, l'entreprise pourra décider d'afficher un menu secondaire ou une bannière web.

 

La visibilité et la simplicité du menu

Un bon menu passe par une navigation bien organisée et simple d'utilisation. Cela permet aux internautes de trouver facilement et rapidement ce qu'ils recherchent lorsqu'ils consultent un site web. Un menu simplifié contribue donc à une expérience utilisateur positive.

 

La logique commerciale

Un bon menu de navigation, c'est aussi un menu adapté aux besoins spécifiques des utilisateurs. Le menu doit être construit en fonction du type d'entreprise à promouvoir et des informations que les prospects consulteront pour finaliser leur choix d'un prestataire. À ce titre, l'accès aux descriptifs des prestations, aux cas clients, aux formulaires de contact ou aux tarifications sont autant d'éléments que l'entreprise peut faire apparaitre dans son menu.

Le guide pour comprendre les langages HTML et CSS.

Découvrez comment utiliser les langages HTML et CSS pour gérer votre site web efficacement.

Exemple de menu de navigation en HTML / CSS

Un menu de navigation peut être basé sur différents codes comme Javascript ou le langage HTML/CSS. Le HTML/CSS offre des avantages : une possibilité de création plus simple et un format d'application plus réduit. Utiliser ce langage permet de se prémunir des conflits habituellement rencontrés avec JavaScript.

Exemple de menu de navigation en HTML :

Exemple menu de navigation HTML

Exemple de menu de navigation en CSS :

Exemple menu de navigation CSS

 

Pour aller plus loin, découvrez comment évaluer votre site web en utilisant l'outil Website Grader ; ou découvrez les modèles de site web gratuits de HubSpot.

website grader

Publication originale le 21 mars 2023, mise à jour le 18 avril 2023

Sujet(s):

Web design