Navigation principale - Main navigation

La navigation principale est l'élément central de la navigation au sein du site, il oriente l’utilisateur à travers les grandes sections du site et sur éventuellement plusieurs niveaux de profondeur.

 

 

La navigation principale est modulable selon vos besoins et l’arborescence du site. Elle permet d'afficher jusqu'à 8 entrées principales

Structure

Elle se compose des éléments suivants :

  • Une barre de navigation

  • Des items de menu (Liens directs ou menu déroulants)

    • qui peuvent être des liens directs, des menus déroulants ou des mega-menus.

Liens directs

La navigation principale peut proposer des liens directs vers des pages destination. Il est recommandé de l’utiliser pour les sites ou les rubriques qui n’ont pas ou peu de second niveau d’arborescence ou en le combinant avec un menu latéral.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!-- Liens directs uniquement --> <nav class="fr-nav" id="header-navigation" role="navigation" aria-label="Menu principal"> <ul class="fr-nav__list"> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self" aria-current="page">accès direct</a> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> </ul> </nav>

Le menu déroulant permet d’afficher les niveaux secondaires d’une rubrique. Il est recommandé pour les sites ou rubriques peu profonds. Il faut éviter de proposer plus de 8 liens dans les menus déroulants.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 <!-- Menu déroulant sur les 2 premiers éléments --> <nav class="fr-nav" id="navigation-773" role="navigation" aria-label="Menu principal"> <ul class="fr-nav__list"> <li class="fr-nav__item"> <button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-776" aria-current="true">Entrée menu active</button> <div class="fr-collapse fr-menu" id="menu-776"> <ul class="fr-menu__list"> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> </ul> </div> </li> <li class="fr-nav__item"> <button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-774">Entrée menu</button> <div class="fr-collapse fr-menu" id="menu-774"> <ul class="fr-menu__list"> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> </ul> </div> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> </ul> </nav>

 

Mega menu

Le mega menu est un menu de navigation plus complexe qui donne accès à plusieurs niveaux d’arborescence. Il est recommandé de l’utiliser lorsqu’une arborescence est profonde. Il est également composé de différents éléments, modulables selon vos besoins.

 

1 2 3 <nav class="fr-nav" id="header-navigation" role="navigation" aria-label="Menu principal"> <ul class="fr-nav__list"> (...)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 <!-- Mega menu sur les deux premiers éléments --> <nav class="fr-nav" id="header-navigation" role="navigation" aria-label="Menu principal"> <ul class="fr-nav__list"> <li class="fr-nav__item"> <button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-775" aria-current="true">Entrée mega menu</button> <div class="fr-collapse fr-mega-menu" id="mega-menu-775" tabindex="-1"> <div class="fr-container fr-container--fluid fr-container-lg"> <button class="fr-link--close fr-link" aria-controls="mega-menu-775">Fermer</button> <div class="fr-grid-row fr-grid-row-lg--gutters"> <div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v"> <div class="fr-mega-menu__leader"> <h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4> <p class="fr-hidden fr-displayed-lg">Lorem [...] elit ut.</p> <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content" href="#">Voir toute la rubrique</a> </div> </div> <div class="fr-col-12 fr-col-lg-3"> <h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a> </h5> <ul class="fr-mega-menu__list"> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self" aria-current="page">Page active</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> </ul> </div> <div class="fr-col-12 fr-col-lg-3"> <h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a> </h5> <ul class="fr-mega-menu__list"> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> </ul> </div> <div class="fr-col-12 fr-col-lg-3"> <h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a> </h5> <ul class="fr-mega-menu__list"> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> </ul> </div> <div class="fr-col-12 fr-col-lg-3"> <h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a> </h5> <ul class="fr-mega-menu__list"> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> </ul> </div> </div> </div> </div> </li> <li class="fr-nav__item"> <button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-777">Entrée mega menu</button> <div class="fr-collapse fr-mega-menu" id="mega-menu-777" tabindex="-1"> <div class="fr-container fr-container--fluid fr-container-lg"> <button class="fr-link--close fr-link" aria-controls="mega-menu-777">Fermer</button> <div class="fr-grid-row fr-grid-row-lg--gutters"> <div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v"> <div class="fr-mega-menu__leader"> <h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4> <p class="fr-hidden fr-displayed-lg">Lorem [...] elit ut.</p> <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content" href="#">Voir toute la rubrique</a> </div> </div> <div class="fr-col-12 fr-col-lg-3"> <h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a> </h5> <ul class="fr-mega-menu__list"> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> </ul> </div> <div class="fr-col-12 fr-col-lg-3"> <h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a> </h5> <ul class="fr-mega-menu__list"> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> </ul> </div> <div class="fr-col-12 fr-col-lg-3"> <h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a> </h5> <ul class="fr-mega-menu__list"> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> </ul> </div> <div class="fr-col-12 fr-col-lg-3"> <h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a> </h5> <ul class="fr-mega-menu__list"> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> <li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li> </ul> </div> </div> </div> </div> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> </ul> </nav>

 


Le mega menu est composé :

  • d'éléments de contexte

    • nom de la rubrique - facultatif

    • texte de présentation - facultatif

    • lien vers la home de rubrique - facultatif

  • des listes de liens

    • noms des sous catégories - facultatifs, peuvent être cliquables

    • liens des pages - obligatoires

Il est recommandé de ne pas dépasser 8 liens dans les listes liens de chaque sous-catégories.

Responsive

En version mobile la navigation principale est accessible depuis le pictogramme “burger”.  Le clic sur le pictogramme déclenche l’affichage d’un overlay présentant les éléments de la navigation et les liens directs de l’en-tête si présents (voir la documentation En-tête) .

Le système d’overlay permet l’affichage du contenu des différents types de menu :

Liens directs

 

 

Méga menu

 

Règles d’utilisation

Usage

La navigation principale est liée à l’en-tête :

  • elle se place juste en dessous de l'en-tête en mode desktop

  • en navigation mobile, quelle que soit sa forme, elle se réduit dans un menu burger

À noter que contrairement à l’en-tête, la navigation principale n’est pas obligatoire.

La navigation principale, même dans sa version la plus grande avec le mega menu, est contrainte en hauteur. Il faut donc l’anticiper lors de la conception de l’architecture de l’information afin d'éviter une nombre trop important de liens et de niveaux - et donc réfléchir à la densité de l’information.

La navigation principale est le composant permettant de guider l’utilisateur dans la navigation, mais elle est souvent accompagnée d’autres composants : la barre de recherche , le menu latéral , le sommaire , le pied de page .

Dans un même menu il est possible d’utiliser des liens directs et des menus déroulants/ méga menu

Il n'est en revanche pas recommandé de mélanger l’usage des menus déroulants et des méga menus.

 

Accessibilité

Les règles d’accessibilité sur la navigation principale :

  • le menu doit être navigable au clavier: les listes déroulantes, ou mega menu s’ouvrent au click / appui sur la touche enter.

  • Sur les sous-menus du mega menu, le lien permettant de replier le sous-menu doit être le premier élément prenant le focus.

  • L’item de menu actif est différencié visuellement et possède un attribut aria-current.
    S’il s’agit du lien de la page courante, on ajoute un attribut aria-current=”page” sur la balise <a>.
    S'l s’agit d’un item de menu actif (bouton de premier niveau), on l’indique par un attribut aria-current=”true”.

 

Contenu

Pour les libellés des entrées du menu et des liens, utiliser des formulations claires et concises.

Personnalisation

Ce composant n’est pas personnalisable.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :