Navigation principale

La navigation principale est le système central de navigation au sein d’un site. Elle permet d’orienter l’usager à travers les rubriques principales et secondaires du site.

HTML

Structure du composant

Le composant 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.

Sa structure est conçue pour s’adapter aux écrans mobiles et comprend les éléments suivants :

  • Le conteneur principal, obligatoire, de la navigation est un élément HTML <nav> avec le rôle navigation défini par la classe fr-nav.
    • Il dispose d'attribut aria-label, dont la valeur doit décrit la fonction de la navigation (ex: "Menu principal").
  • La liste de liens ou de sous-sections, obligatoire, de la navigation est un élément HTML <ul> défini par la classe fr-nav__list.
    • Chaque élément <li> défini par la classe fr-nav__item de la liste peut contenir un lien direct, un menu déroulant ou un mega-menu.
  • Un Lien direct est un élément HTML <a> de type link défini par la classe fr-nav__link.
    • Le lien actif dispose d'un attribut aria-current="page".
  • Un Menu déroulant est composé :
    • D'un Bouton d'ouverture, obligatoire, du menu déroulant, un élément HTML <button> de type button défini par la classe fr-nav__btn.
      • Le bouton dispose d'un attribut aria-expanded, sa valeur [true|false] défini si le bloc refermable de la navigation est ouvert ou fermé.
      • Le bouton est lié au bloc refermable via l'attribut aria-controls, sa valeur doit correspondre à l'attribut id du bloc refermable.
      • Le bouton actif dispose d'un attribut aria-current="true".
    • D'un bloc refermable, obligatoire, défini par les classes fr-collapse et fr-menu, est un élément HTML <div> placé après le bouton d'ouverture. Il s'agit d'un élément générique du core utilisé par d'autres composants tels que le menu latéral ou l'accordéon.
      • Le bloc refermable contient une liste de liens directs, un élément HTML <ul> défini par la classe fr-menu__list.
        • Chaque élément <li> de la liste contient un lien direct défini par la classe fr-nav__link.
  • Un Mega-menu est composé :
    • D'un bouton d'ouverture, obligatoire, est un élément HTML <button> de type button défini par la classe fr-nav__btn.
      • Le bouton dispose d'un attribut aria-expanded, sa valeur [true|false] défini si le bloc refermable de la navigation est ouvert ou fermé.
      • Le bouton est lié au bloc refermable via l'attribut aria-controls, sa valeur doit correspondre à l'attribut id du bloc refermable.
      • Le bouton actif dispose d'un attribut aria-current="true".
    • D'un bloc refermable, obligatoire, défini par les classes fr-collapse et fr-mega-menu, est un élément HTML <div> placé après le bouton d'ouverture. Il s'agit d'un élément générique du core utilisé par d'autres composants tels que le menu latéral ou l'accordéon.
      • Le bloc refermable contient le conteneur du mega-menu, un élément HTML <div> défini par les classes fr-container, fr-container--fluid et fr-container-lg et contenant :
        • Le bouton de fermeture du mega-menu, obligatoire, est un élément HTML <button> de type button défini par les classes fr-btn et fr-btn--close.
          • Le bouton est lié au bloc refermable via l'attribut aria-controls, sa valeur doit correspondre à l'attribut id du bloc refermable.
          • Le bouton dispose d'un attribut title et un texte explicite pour indiquer son action.
        • La grille du mega-menu, dont la documentation est disponible dans les fondamentaux (voir grille ) composée d'une ou plusieurs colonnes comprenant :
          • Des éléments de contexte (nom de la rubrique, texte de présentation, lien vers la home de rubrique), optionnels, définis par la classe fr-mega-menu__leader.
          • Des noms des sous catégories, optionnels, pouvant être cliquables, dans un niveau de titre hx et définis par la classe fr-mega-menu__category.
          • Une liste de liens directs, obligatoire, dans un élément HTML <ul> défini par la classe fr-mega-menu__list.
            • Chaque élément <li> de la liste contient un lien direct défini par la classe fr-nav__link.
            • Le lien actif dispose d'un attribut aria-current="page".

Exemple de structure HTML complet

Exemple de structure HTML avec Liens directs

Exemple de structure HTML avec Menu déroulant

Exemple de structure HTML avec Mega menu

CSS

Installation du CSS

Pour fonctionner correctement le style CSS de la navigation et du core doivent être importés. L'import doit se faire avant le contenu de la page dans la partie <head>, et de préférence avec le fichier minifié, car plus léger. 

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/navigation/navigation.min.css" rel="stylesheet">

NB: Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css

Pour fonctionner sur Internet Explorer 11, un fichier legacy, peut aussi être importé : 

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/navigation/navigation.legacy.min.css" rel="stylesheet">

JavaScript

Installation du JavaScript

Pour fonctionner le composant navigation nécessite l'utilisation de JavaScript. Chaque composant utilisant javascript possède un fichier Js spécifique et requiert le fichier Js du core.

Il est donc nécessaire d'importer ces fichiers à la fin de la page (avant </body>) : 

<script type="module" src="dist/core/core.module.min.js"></script>
<script type="module" src="dist/component/navigation/navigation.module.min.js"></script>

NB: Il est aussi possible d'importer le Js global du DSFR dsfr.module.js

Pour fonctionner sur Internet Explorer 11, un fichier legacy, en version nomodule ES5, peut aussi être importé : 

<script type="text/javascript" nomodule href="dist/legacy/legacy.nomodule.min.js"></script>
<script type="text/javascript" nomodule src="dist/core/core.nomodule.min.js"></script>
<script type="text/javascript" nomodule src="dist/component/navigation/navigation.nomodule.min.js"></script>

Une fois le JavaScript chargé, le composant fonctionne automatiquement.

Instances

Sur la navigation, les éléments suivants sont instanciés :

  • Le conteneur principal, via la classe : fr-nav.
  • Les éléments de la liste, via la classe : fr-nav__item.
  • Le bouton d'ouverture, via la classe fr-nav__btn.
  • La sous-section, via la classe fr-collapse.

Une fois chargé, le Js ajoute un attribut data-fr-js-NOM_INSTANCE="true" sur chacun des éléments instanciés.

API

Il est possible d'interagir avec les instances du composants en JavaScript via une API.

Cette API est disponible depuis la méthode window.dsfr(instance) du core.

Exemple :

const elem = document.getElementById('ID_SOUS_SECTION');
dsfr(elem).collapse.disclose();

L'ensemble des propriétés et méthodes disponibles sont définies ci-après :

current
Description Retourne l'API de la sous-section ouverte.
Si aucune sous-section n'est ouverte, ou si plusieurs sous-sections sont ouvertes, renvoie null.
Type property
Retour object | null
Exemple dsfr(elem).navigation.current
hasFocus
Description Renvoie vrai si le focus est sur un des éléments du groupe.
Type property
Retour Boolean
Exemple dsfr(elem).navigation.hasFocus
index
Description Retourne ou modifie l'index de la sous-section courante.
Si aucune sous-section n'est ouverte, l'index vaut 0.
Type property
Retour Number
Exemple dsfr(elem).navigation.index
dsfr(elem).navigation.index = 2
isGrouped
Description Défini si les sous-sections du groupe sont liées en eux ou non.
Si true, lorsqu'une sous-section est ouverte les autres se referment. Si false, il est possible d'en ouvrir plusieurs. Si l'attribut n'est pas défini les sous-sections sont groupées par défaut.
Type property
Retour Boolean
Exemple dsfr(elem).navigation.isGrouped
dsfr(elem).navigation.isGrouped = true
length
Description Retourne le nombre de sous-sections dans le groupe.
Type property
Retour Number
Exemple dsfr(elem).navigation.length
members
Description Renvoie un tableau d'objets correspondant aux sous-sections du groupe.
Type property
Retour Array
Exemple dsfr(elem).navigation.members
node
Description Renvoie le noeud HTML de l'élément.
Type property
Retour DOMElement
Exemple dsfr(elem).navigation.node
isEnabled
Description Défini si le fonctionnement de la navigation est activé ou non
Type property
Retour Boolean
Exemple dsfr(elem).navigationItem.isEnabled = false
node
Description Renvoie le noeud HTML de l'élément.
Type property
Retour DOMElement
Exemple dsfr(elem).navigationItem.node
collapseButton
focus
Description Replace le focus sur le bouton
Type function
Arguments none
Retour Boolean
Exemple dsfr(elem).collapseButton.focus()
isEnabled
Description Défini si le fonctionnement du bouton de la navigation est activé ou non
Type property
Retour Boolean
Exemple dsfr(elem).collapseButton.isEnabled = false
node
Description Renvoie le noeud HTML de l'élément.
Type property
Retour DOMElement
Exemple dsfr(elem).collapseButton.node
collapse
conceal
Description Ferme la sous-section
Type function
Arguments none
Retour none
Exemple dsfr(elem).collapse.conceal()
disclose
Description Ouvre la sous-section
Type function
Arguments none
Retour none
Exemple dsfr(elem).collapse.disclose()
isDisclosed
Description Retourne vrai si la sous-section est ouverte
Type property
Retour Boolean
Exemple dsfr(elem).collapse.isDisclosed
isEnabled
Description Défini si le fonctionnement de la navigation est activé ou non
Type property
Retour Boolean
Exemple dsfr(elem).collapse.isEnabled = false
group
Description Retourne l'API du groupe, ou null s'il n'y a pas de groupe
Type property
Retour object | null
Exemple dsfr(elem).collapse.group
buttons
Description Retourne un tableau de boutons d'ouverture de la sous-section
Type property
Retour Array
Exemple dsfr(elem).collapse.buttons
focus
Description Replace le focus sur le bouton de la sous-section
Type function
Arguments none
Retour Boolean
Exemple dsfr(elem).collapse.focus()
parent
Description Retourne l'instance du dsfr parent, ici la navigation
Type property
Retour object | null
Exemple dsfr(elem).parent
children
Description Renvoie un tableau d'instances enfants
Type property
Retour Array
Exemple dsfr(elem).children
node
Description Renvoie le noeud HTML de l'élément.
Type property
Retour DOMElement
Exemple dsfr(elem).collapse.node

Événements

Le Système de Design fournit des événements personnalisés pour les actions uniques de la part de certains composants réactifs listés sur la page de l' API Javascript .

Sur chaque menu déroulant de la navigation principale, les événements suivants sont disponibles :

événements
Événement Action Élément Attribut
dsfr.conceal Fermeture de l'élément Collapse data-fr-js-collapse
dsfr.disclose Ouverture de l'élément Collapse data-fr-js-collapse
dsfr.click Click sur le bouton d'ouverture CollapseButton data-fr-js-collapse-button

Note de version

Voir les évolutions sur github

v1.13.1 - 26 mars 2025

ajout de la fermeture des menus au clavier

  • La touche échap ferme le menu ouvert
  • Lorsque le focus sort du menu au TAB, ferme le menu ouvert

✨ feat

navigation

#1091

correctif template ejs

  • Correctif des variables des templates sidemenu, navigation, header

🐛 fix

sidemenu

navigation

header

#1073

v1.13.0 - 4 décembre 2024

retrait des sélecteur css ">"

  • Retrait des selecteurs d'enfants directs pour éviter les problèmes lors de l'ajout de balises intermediaires (cas de création de sous composants)

🐛 fix

tile

navigation

#1049

v1.11.1 - 31 janvier 2024

corrige bugs de fermeture du composant

🐛 fix

navigation

#840

v1.11.0 - 11 décembre 2023

correctifs de style mega-menu

  • ajoute un margin-top: -1.25rem (-20px) sur le fr-mega-menu__leader
  • passe le texte de description et le lien du fr-mega-menu__leader en taille sm
  • supprime la classe fr-mb-4v de la colonne entourant le fr-mega-menu__leader
  • le texte du bouton de navigation passe en $text-action-high-blue-france à l'ouverture

🐛 fix

navigation

#785

v1.10.0 - 19 juillet 2023

homogénéisation des espacements et indentation

  • Uniformisation du menu latéral, navigation, et accordéon
    • ajout d'un fond open-blue-france et du texte en blue-france sur les boutons d'ouverture en état ouvert
    • ajout de marge pour indenter les sous menus
    • ajustement des espacements
  • Ajustement de la navigation du header en mobile
  • Ajustement de la taille max de la navigation dans le header en desktop

✨ feat

navigation

header

sidemenu

#678

focus des nav-items mobile & ajustements

  • L'outline de focus est maintenant entièrement visible sur les liens des sous menu en mobile
  • Ajustement de l'alignement du bouton fermé en desktop
  • Retrait du mega-menu__leader vide dans les examples

🐛 fix

header

navigation

#609

v1.9.1 - 11 avril 2023

fermeture de la navigation au clic sur lien ou bouton

Actuellement, la navigation reste présente en mobile et en desktop lorsque l'on clique sur un lien ou un bouton qu'elle contient, ce qui pose problème dans le cas des Single-page application. La fonctionnalité est maintenant modifiée pour que tout clic sur un élément <button> ou <a> entraîne la fermeture de la navigation (modale et/ou menu). L'ajout de l'attribut data-fr-prevent-conceal permet de préserver un lien ou un bouton particulier de ce nouveau comportement.

✨ feat

header

navigation

#583

v1.6.0 - 14 juin 2022

correctif focus au clic sur les liens

fix

navigation

#336

v1.4.0 - 16 mars 2022

correction affichage mega-menu

fix

navigation

#242

v1.3.1 - 7 février 2022

correction focus coupés

fix

navigation

sidemenu

#204

v1.2.0 - 17 novembre 2021

espacement catégories mobile

fix

navigation

#105

nav-link hover sur a et button uniquement

fix

navigation

#68

mega menu category bold

fix

navigation

#61

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github