Sommaire

Le sommaire est un système de navigation secondaire présentant une liste d’ancres placée au-dessus du contenu correspondant.

HTML

Structure du composant

Le composant Sommaire est un élément interactif permettant de naviguer entre différentes sections de contenu.

Sa structure est la suivante :

  • Le conteneur du sommaire est une balise <div> avec la classe fr-summary et le rôle navigation.
    • Le sommaire dispose d'un attribut aria-labelledby défini sur l'ID du titre du sommaire.
  • Le titre du sommaire, obligatoire, est défini par la classe fr-summary__title.
  • Les éléments de la liste d'ancre, obligatoire, sont contenus dans une balise <ol>.
    • Chaque élément de la liste <li> contient un lien <a> défini par la classe fr-summary__link.

Exemple de structure HTML

<nav class="fr-summary" role="navigation" aria-labelledby="fr-summary-title">
    <h2 class="fr-summary__title" id="fr-summary-title">Sommaire</h2>
    <ol>
        <li>
            <a class="fr-summary__link" id="summary-link-1" href="#anchor-1">Libellé du lien 1</a>
            <ol>
                <li>
                    <a class="fr-summary__link" id="summary-link-1-1" href="#anchor-1.1">Libellé du lien 1.1</a>
                </li>
                <li>
                    <a class="fr-summary__link" id="summary-link-1-2" href="#anchor-1.2">Libellé du lien 1.2</a>
                </li>
                <li>
                    <a class="fr-summary__link" id="summary-link-1-3" href="#anchor-1.3">Libellé du lien 1.3</a>
                </li>
            </ol>
        </li>
        <li>
            <a class="fr-summary__link" id="summary-link-2" href="#anchor-2">Libellé du lien 2</a>
        </li>
    </ol>
</nav>

CSS

Installation du CSS

Pour fonctionner correctement, les styles CSS du core et du sommaire 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/summary/summary.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/summary/summary.legacy.min.css" rel="stylesheet">

JavaScript

Le composant Sommaire ne nécessite pas l'utilisation de JavaScript pour son fonctionnement de base.


Note de version

Voir les évolutions sur github

v1.11.0 - 11 décembre 2023

v1.8.0 - 27 octobre 2022

v1.2.0 - 17 novembre 2021

v1.0.0 - 24 juin 2021

Proposer une amélioration

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