Conceptualisation du menu de navigation principale
Le menu de navigation principale est un élément essentiel pour une navigation fluide et intuitive sur un site Web ou une application.
Anatomie
Le menu de navigation principale peut être composé de plusieurs éléments :
Principes de base
Dans cette section, deux aspects fondamentaux de la navigation sur un site Web sont abordés : comment structurer efficacement l'architecture de l'information et pourquoi il est crucial de implémenter judicieusement le design de votre menu.
Travailler son architecture de l’information
Pour découvrir les concepts clés et les meilleures pratiques pour organiser l'information sur un site Web ou une application, il est recommandé de consulter la page Architecture de l'information.
Ne pas utiliser les « menus hamburger »
Les « menus hamburger » sont considérés comme une mauvaise pratique. Tous les détails à ce sujet se trouvent sur la page « Mauvaises pratiques ».
La navigation complètement ou partiellement visible que nous présentons ici, qui adopte le principe de « Priorité Plus », doit être utilisée. Ce modèle de navigation met en avant les éléments les plus importants tout en gardant les options supplémentaires facilement accessibles, optimisant ainsi l'expérience utilisateur.
Principe de « Priorité Plus »
Le « Priorité Plus » est un concept de design d'interface utilisateur qui optimise l'utilisation de l'espace, particulièrement sur les écrans de petite taille ou variables.
Le principe est de montrer autant d'éléments de navigation que l'espace le permet, en donnant la priorité aux éléments les plus importants. Les éléments qui ne peuvent pas être affichés en raison de contraintes d'espace sont regroupés sous un élément « Plus », permettant d’ouvrir un sous-menu.
Une navigation adoptant ce principe est l’alternative au « menu hamburger », qui cache toutes les options de navigation en format mobile.
Alternative aux sous-menus : la page de navigation
Les pages de navigation, alternatives aux sous-menus, offrent une vue claire des sections du site.
Elles sont particulièrement utiles sur mobile, où les sous-menus peuvent être difficiles à utiliser.
Leurs liens plus grands sont accompagnés par des descriptions courtes pour guider l'utilisateur, facilitant la navigation et réduisant les erreurs.
Elles peuvent améliorer le référencement du site grâce à un contenu riche en mots-clés.
Notez que si un libellé de menu mène à une page de navigation, il ne doit pas afficher d'icône de chevron, utilisée pour indiquer l'ouverture d'un sous-menu.
Quand l’utiliser
Le menu de navigation principale est nécessaire lorsque le site comporte des éléments de navigation distincts du bandeau d'en-tête du Programme d'identification visuelle du gouvernement du Québec (PIV). Les liens typiques dans le PIV incluent le logo du gouvernement du Québec, le nom du ministère ou de l'organisme public, le lien de changement de langue et le lien de contact avec le ministère ou l'organisme public.
La navigation vers les contenus du site doit exclusivement se faire par le biais du menu de navigation principal.
Cependant, il convient de noter que le menu de navigation principal peut ne pas être nécessaire dans certaines situations. Par exemple :
- Si le site contient un nombre très limité de sections (moins de 3), le menu de navigation principal peut être superflu.
- Si le site comporte un grand nombre de sections (plus de 6), il peut être judicieux d’utiliser une autre forme de navigation pour garantir la simplicité et l'efficacité de la navigation sur le site.
- Si le site propose d'autres mécanismes de navigation, comme une barre de recherche, par exemple.
Comment l’utiliser
Pour une mise en œuvre adaptée du menu de navigation principale en fonction des spécificités du site Web à concevoir, la documentation des composants disponibles doit être consultée : éléments de navigation, sous-menus, icônes utilitaires et bouton de session.
Informations techniques
Positionnement et comportement
Le menu est placé immédiatement sous le bandeau d'en-tête du PIV.
Au défilement vers le bas de la page, le menu de navigation disparaît.
Il peut toutefois être pertinent de faciliter l’accès aux éléments du menu sans avoir à remonter la page entière. Au défilement vers le haut, le menu réapparaît et demeure fixe.
Il n’est pas recommandé de fixer le menu en format mobile puisque celui-ci réduit l’espace des contenus et nuit à l’expérience de l’utilisateur.
Dimensions
Le menu occupe toute la largeur de l’écran.
En format bureau, la hauteur est 72 px.
En format mobile, la hauteur est de 40 px, s’il y a une seule rangée. Si, on a besoin de disposer les libellés de menus en plus des icônes utilitaires et/ou du bouton de session, il faudra deux rangées superposées. Le menu aura ainsi une hauteur de 80 px.
Bureau
Mobile
Espacements
Dans le menu, les éléments se positionnent conformément aux marges du contenu. Pour assurer une lisibilité optimale, il est indispensable de maintenir une marge minimale de 16 px à la fois à gauche et à droite. En format mobile, la marge peut être de 8 px pour maximiser l’espace en largeur. Cela évite que le texte ne soit trop près du bord de la fenêtre.
Bureau
Mobile
États
La couleur d'arrière-plan est #19406C. Il n’y a aucun changement d’état pour le menu.
CSS du menu - bureau et tablette
background-color: #19406c;
width: 100%;
height: 72px;
CSS du menu - mobile
background-color: #19406c;
width: 100%;
height: 40px; /* une seule ligne */
height: 80px; /* deux lignes */
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026