Menu latéral

Le menu latéral est un système de navigation secondaire présentant une liste verticale de liens placée à côté du contenu.

HTML

Structure du composant

Le composant Menu latéral permet aux utilisateurs de naviguer entre les différentes pages d’une rubrique ou d’un même thème.

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

• Le conteneur principal, obligatoire, du menu latéral est un élément HTML <nav> défini par la classe fr-sidemenu.
  • Il dispose d'attribut aria-labelledby, dont la valeur doit correspondre à l'attribut id du titre du menu latéral.
• Le conteneur intérieur, obligatoire, du menu latéral est un élément HTML <div> défini par la classe fr-sidemenu__inner, contenant :
  • Le bouton d'ouverture, obligatoire, affiché uniquement en mobile est un élément HTML <button> de type button défini par la classe fr-sidemenu__btn.
    • Le libellé du bouton indique l'action d'ouverture du menu latéral en vue mobile.
    • Le bouton dispose d'un attribut aria-expanded, sa valeur [true|false] défini si le bloc refermable du menu latéral 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 bloc refermable, obligatoire, défini par la classe fr-collapse, est un élément HTML <div> placé après le bouton. Il s'agit d'un élément générique du core utilisé par d'autres composants tels que la navigation ou l'accordéon.
    • Il dispose d'un attribut id obligatoire, pour être lié au bouton d'ouverture.
    • Le bloc refermable contient :
      • Le titre, optionnel, du menu latéral est un élément HTML <div> défini par la classe fr-sidemenu__title.
      • La liste de liens ou de sous-sections, obligatoire, est un élément HTML <ul> placé après le titre et défini par la classe fr-sidemenu__list.
        • Chaque élément <li> défini par la classe fr-sidemenu__item de la liste contient :
          • Un lien, un élément HTML <a> défini par la classe fr-sidemenu__link.
          • L'élément actif de la liste est défini par la classe fr-sidemenu__item--active et le lien contenu dispose d'un attribut aria-current="page".

Exemple de structure HTML simple

<nav class="fr-sidemenu" aria-labelledby="fr-sidemenu-title">
  <div class="fr-sidemenu__inner">
    <button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Dans cette rubrique</button>
    <div class="fr-collapse" id="fr-sidemenu-wrapper">
      <div class="fr-sidemenu__title" id="fr-sidemenu-title">Titre de rubrique</div>
      <ul class="fr-sidemenu__list">
        <li class="fr-sidemenu__item fr-sidemenu__item--active">
          <a class="fr-sidemenu__link" href="#" target="_self" aria-current="page">Accès direct</a>
        </li>
        <li class="fr-sidemenu__item">
          <a class="fr-sidemenu__link" href="#" target="_self">Accès direct</a>
        </li>
        <li class="fr-sidemenu__item">
          <a class="fr-sidemenu__link" href="#" target="_self">Accès direct</a>
        </li>
        <li class="fr-sidemenu__item">
          <a class="fr-sidemenu__link" href="#" target="_self">Accès direct</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Sous-sections

Le menu latéral peut contenir jusqu'à trois niveaux d’arborescence et permettent d’afficher les niveaux 1, 2 et 3 imbriqués d’une rubrique.

• Le conteneur d'une sous-section est un élément de la liste de liens <li> défini par la classe fr-sidemenu__item contenant :
  • Le bouton d'ouverture de la sous-section, un élément HTML <button> de type button défini par la classe fr-sidemenu__btn.
    • Le libellé du bouton indique le nom de la sous-section.
    • Le bouton dispose d'un attribut aria-expanded, sa valeur [true|false] défini si le bloc refermable de la sous-section 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 dispose d'un attribut aria-current, sa valeur [true|false] défini si le bouton est actif.
  • Le bloc refermable, défini par la classe fr-collapse, est un élément HTML <div> placé après le bouton.
    • Il dispose d'un attribut id obligatoire, pour être lié au bouton d'ouverture.
    • Le bloc refermable contient une liste de liens pouvant contenir un troisième niveau d'imbrication du menu latéral basé sur la même structure de sous-section.

Exemple de structure HTML

<nav class="fr-sidemenu" role="navigation" aria-labelledby="sidemenu-title">
  <div class="fr-sidemenu__inner">
    <button aria-expanded="false" aria-controls="sidemenu" type="button" class="fr-sidemenu__btn">Dans cette rubrique</button>
    <div class="fr-collapse" id="sidemenu">
      <p class="fr-sidemenu__title" id="sidemenu-title">Titre de rubrique</p>
      <ul class="fr-sidemenu__list">
        <li class="fr-sidemenu__item">
          <button aria-expanded="true" aria-controls="sidemenu-submenu-level-02" aria-current="true" type="button" class="fr-sidemenu__btn">Entrée menu active</button>
          <div class="fr-collapse" id="sidemenu-submenu-level-02">
            <ul class="fr-sidemenu__list">
              <li class="fr-sidemenu__item">
                <a href="#" class="fr-sidemenu__link">Accès direct niveau 2</a>
              </li>
              <li class="fr-sidemenu__item">
                <button aria-expanded="true" aria-controls="sidemenu-submenu-level-03" aria-current="true" type="button" class="fr-sidemenu__btn">Entrée menu active</button>
                <div class="fr-collapse" id="sidemenu-submenu-level-03">
                  <ul class="fr-sidemenu__list">
                    <li class="fr-sidemenu__item">
                      <a href="#" class="fr-sidemenu__link">Accès direct niveau 3</a>
                    </li>
                    <li class="fr-sidemenu__item">
                      <a aria-current="page" href="#" class="fr-sidemenu__link">Accès direct niveau 3</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li class="fr-sidemenu__item">
          <a href="#" class="fr-sidemenu__link">Accès direct</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS

Installation du CSS

Pour fonctionner correctement le style CSS du menu latéral 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/sidemenu/sidemenu.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/sidemenu/sidemenu.legacy.min.css" rel="stylesheet">

Variante de menu latéral fixe

Le menu latéral peut s’afficher de manière fixe sur votre page, afin de rester visible tout au long de la navigation de l’utilisateur sur la page ouverte avec l'utilisation de la classe fr-sidemenu--sticky.

Exemples de variante de menu latéral fixe

<nav class="fr-sidemenu fr-sidemenu--sticky" role="navigation" aria-labelledby="sidemenu-sticky-title">
    <!-- Contenu du menu latéral fixe -->
</nav>

Variante de menu latéral fixe, affiché sur 100% de la hauteur de page

Le menu latéral peut s’afficher de manière fixe sur 100% de la hauteur de votre page avec l'utilisation de la classe fr-sidemenu--sticky-full-height.

Exemples de variante de menu latéral fixe, affiché sur 100% de la hauteur de page

<nav class="fr-sidemenu fr-sidemenu--sticky-full-height" role="navigation" aria-labelledby="sidemenu-sticky-full-height-title">
    <!-- Contenu du menu latéral fixe, affiché sur 100% de la hauteur de page -->
</nav>

Variante de menu latéral à droite de la page

Le menu latéral peut être placé à droite de la page avec l'utilisation de la classe fr-sidemenu--right afin que la bordure se positionne à gauche du menu. On peut également le rendre fixe avec l'utilisation de la classe fr-sidemenu--sticky.

Exemples de variante de menu latéral à droite de la page

<nav class="fr-sidemenu fr-sidemenu--right" role="navigation" aria-labelledby="sidemenu-right-title">
    <!-- Contenu du menu latéral à droite de la page -->
</nav>

JavaScript

Installation du JavaScript

Pour fonctionner le composant menu latéral 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/sidemenu/sidemenu.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/sidemenu/sidemenu.nomodule.min.js"></script>

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

Instances

Sur le menu latéral, les éléments suivants sont instanciés :

• La liste de liens, via la classe : fr-sidemenu__list.
• Les éléments de la liste, via la classe : fr-sidemenu__item.
• Le bouton d'ouverture, via la classe fr-sidemenu__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 :

sidemenuList

sidemenuItem

collapseButton

collapse

É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 .

Dans la version mobile du menu latéral et sur chaque menu déroulant du menu latéral, les événements suivants sont disponibles :

Note de version

Voir les évolutions sur github