---
boost: 0
sitemap:
  noindex: true
title: Design du Sommaire
shortTitle: Design du Sommaire
description: Présentation des choix graphiques, des principes visuels et des variantes disponibles du composant Sommaire.
shortDescription: Navigation entre les sections d’une page
keywords: sommaire, summary, navigation, ancre, contenu long, DSFR, accessibilité, design système, interface
cover: ../_asset/cover/cover.png
excerpt: Le composant Sommaire affiche des liens ancrés vers les différentes sections d’une page, facilitant la lecture et l’accès rapide à l’information pour l’usager.
summary: Ce composant permet d’améliorer l’expérience utilisateur dans les pages à forte densité de contenu. Il affiche en haut de page une liste d’ancres reprenant fidèlement les titres des sections éditoriales, dans un bloc distinct visuellement. Le sommaire n’est pas sticky, ne se personnalise pas, et garantit une navigation fluide et cohérente au sein d’un même contenu.
mesh:
  - component/breadcrumb
  - component/sidemenu
---

## Sommaire

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

:::dsfr-doc-tab-navigation

- [Présentation](../index.md)
- [Démo](../demo/index.md)
- Design
- [Code](../code/index.md)
- [Accessibilité](../accessibility/index.md)

:::

:::dsfr-doc-anatomy{imageWidth=384 col=12}

![Anatomie du bouton](../_asset/anatomy/anatomy-1.png)

::dsfr-doc-pin[Un titre “Sommaire”]{required=true}

::dsfr-doc-pin[Un numéro d’ancre]{required=true}

::dsfr-doc-pin[Des libellés d’ancres]{required=true}

::dsfr-doc-pin[Un fond gris]{required=true}

:::

### Variations

Le sommaire ne propose aucune variation.

### Tailles

La largeur du sommaire s’adapte à la taille de son conteneur.

Toutefois, il est recommandé de ne pas excéder une largeur de 8 colonnes, s’agissant d’un composant à intégrer au sein de pages de contenu riche.

### États

**État au survol**

L’état au survol correspond au comportement constaté par l’usager lorsqu’il survole une ancre du sommaire avec sa souris.

### Personnalisation

Le sommaire n’est pas personnalisable.

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[✅ À faire]{col=6 valid=true}

![](../_asset/custom/do-1.png)

Utiliser uniquement le fond de couleur grise.

:::

:::dsfr-doc-guideline[❌ À ne pas faire]{col=6 valid=false}

![](../_asset/custom/dont-1.png)

Ne pas personnaliser la couleur de fond du sommaire.

:::

::::

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[✅ À faire]{col=6 valid=true}

![](../_asset/custom/do-2.png)

Conserver l’apparence des ancres en l’état.

:::

:::dsfr-doc-guideline[❌ À ne pas faire]{col=6 valid=false}

![](../_asset/custom/dont-2.png)

Ne pas personnaliser la couleur ou la typographie des ancres.

:::

::::