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 classefr-summary
et le rôlenavigation
.-
Le sommaire dispose d'un attribut
aria-labelledby
défini sur l'ID du titre du sommaire.
-
Le sommaire dispose d'un attribut
-
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 classefr-summary__link
.
-
Chaque élément de la liste
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
alignement du titre du sommaire
- ajout d'un padding-left de 8px pour aligner le titre avec le premier élément de la liste
#779
v1.8.0 - 27 octobre 2022
v1.2.0 - 17 novembre 2021
v1.0.0 - 24 juin 2021
Ajustement de summary avec les nouvelles listes
- fix(summary): Ajustement de summary avec les nouvelles listes
- doc(summary): Commentaire d'explication sur les nombres utilisés pour créer le décalage de l'hover
- fix(summary): remplacement du marker par un before sur le lien (support safari + hover)
#6