6 types de menu de navigation à distinguer sur des sites web

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.

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 :

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 :

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 :

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 :

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 :

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 :

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.

• Balises HTML à connaître
• Mettre à jour un fichier CSS
• Les écueils à éviter
• Ressources pédagogiques

Télécharger En savoir plus Télécharger

Télécharger

Tous les champs sont obligatoires.

Merci d'avoir soumis le formulaire

Cliquez sur le lien pour accéder au contenu en tout temps

Télécharger

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 de menu de navigation en 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.