# Sommaire

Le bloc **Sommaire** liste les titres de la page et mène à chacun d’un clic. Il marque celui que le visiteur lit. Cette page décrit le choix des titres, l’affichage de la liste, les dépliants, l’habillage de l’entrée et le suivi de lecture.

## Ajouter le bloc

Le sommaire liste les blocs **Titre** de la page. Commencez par écrire vos titres, puis insérez le bloc **Sommaire** ([Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/)), ou tapez `table des matières` dans la recherche des blocs. L’arborescence de vos titres s’affiche aussitôt et suit chaque changement de texte ou de niveau.

Sur une page sans bloc Titre, l’éditeur affiche un avis. Sur le site, le sommaire ne s’affiche pas.

Les titres qui ont des sous-titres deviennent des dépliants, avec un symbole : le visiteur les ouvre pour voir les sous-titres. Les autres sont de simples liens vers leur section.

## Choisir les titres

Sélectionnez le bloc **Sommaire**, onglet **Réglages**, panneau **Titres**. Il range les titres comme le sommaire : chaque sous-titre est décalé vers la droite sous son titre.

1. Pour retirer un titre du sommaire, désactivez sa bascule. Réactivez-la pour le remettre. L’aperçu suit.
2. Pour un autre libellé dans le sommaire, écrivez-le dans le champ sous la bascule, où le texte du titre s’affiche en grisé. Le titre de la page ne change pas.

![Le haut des réglages du Sommaire sur l’accueil du Clos Vermeil : le champ Nom de la région, puis le panneau Titres avec trois titres de la page, chacun avec sa bascule activée et son champ de libellé, les deux derniers décalés sous le premier.](https://static.lovelyrender.com/uploads/2026/10/934-doc-blocs2-sommaire.png)

**Conseil :** Un titre ajouté n’a pas d’identifiant stable avant le premier enregistrement du contenu : le panneau affiche « Enregistrez le contenu une fois pour un suivi stable ». Enregistrez avant de retirer ou de renommer un titre neuf.

- Un titre rendu invisible reste dans le sommaire, sauf si vous le retirez.
- Un titre qui affiche une donnée du contenu, le titre répété dans une carte de liste par exemple, n’entre pas dans le sommaire.
- Les questions d’un [Accordéon](https://lovelyrender.com/fr/documentation/bloc-accordeon/) n’y entrent pas : le sommaire ne liste que les blocs Titre.

## Régler l’affichage de la liste

Le panneau **Affichage de la liste** règle la profondeur et l’allure de la liste.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Niveau de titre maximum** | Les titres plus profonds que ce niveau sont écartés. À **H2**, le sommaire garde les titres H1 et H2. | **H2** |
| **Retrait (px)** | Le retrait des niveaux imbriqués, en pixels, 0 compris. Vide, celui du navigateur, 40 px. | Vide |
| **Style de liste par niveau** | La puce ou la numérotation de chaque niveau : aucune, un disque, un cercle, un carré, des chiffres, des lettres ou des chiffres romains. Pour les lettres et les chiffres romains, **Casse** choisit les minuscules ou les majuscules. | **Par défaut** |
| **Numérotation imbriquée** | Numérote chaque élément par rapport à son parent : 1, 1.1, 1.1.1. Proposé quand tous les niveaux sont numérotés. | Désactivé |

Sans réglage, le sommaire se lit comme une liste de liens, sans puce ni numéro et sans retrait au premier niveau. Une puce choisie pour un niveau s’affiche et redonne son retrait au premier niveau.

## Régler les dépliants

Le panneau **Réglages de l’accordéon** règle les titres qui ont des sous-titres.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Ne peut pas être fermé** | Toutes les sections restent dépliées et le visiteur ne peut pas les replier. Les autres réglages du panneau disparaissent. | Désactivé |
| **Mode d’ouverture** | **Un à la fois** : ouvrir une section replie ses voisines du même niveau. La section qui la contient reste ouverte. **Multiple** : plusieurs sections restent ouvertes. **Un à la fois** est grisé avec **Tous ouverts par défaut**. | **Un à la fois** |
| **Tous ouverts par défaut** | Toutes les sections sont ouvertes au chargement. Demande le mode **Multiple**. | Désactivé |
| **Style du symbole** | Le + qui pivote pour former un ×, le + qui devient −, le chevron qui bascule de ↓ à ↑ ou le chevron qui pivote de → à ↓. | Le + qui pivote |
| **Cercle autour du symbole** | Entoure le symbole d’un cercle. | Désactivé |
| **Position du symbole** | **Gauche** ou **Droite** du texte. | **Droite** |

Le symbole reste affiché sur les titres qui ont des sous-titres : il est le seul repère d’une entrée dépliable. Avec **Ne peut pas être fermé**, rien ne se replie et le symbole disparaît, comme sur l’[Accordéon](https://lovelyrender.com/fr/documentation/bloc-accordeon/). Une section repliée ne s’ouvre pas pendant le défilement : le visiteur la déplie lui-même.

## Habiller l’entrée

Le sommaire contient un seul bloc **Entrée du sommaire**, qui habille chaque titre, à chaque niveau. Un titre et ses sous-titres prennent le même habillage et se distinguent par le retrait, le symbole et la puce de leur niveau.

1. Dans l’aperçu, cliquez sur n’importe quel titre du sommaire. L’entrée du sommaire se sélectionne.
2. Réglez-la dans l’onglet **Styles**. Les autres titres de l’aperçu reprennent son habillage à mesure.
3. Pour revenir aux réglages du sommaire, sélectionnez le bloc **Sommaire**, par son pourtour ou dans la vue d’ensemble du document.

| État | Habille |
| --- | --- |
| **Par défaut** | Une entrée du sommaire. |
| **Survol** | L’entrée sous le pointeur. |
| **Focus** | L’entrée atteinte au clavier. |
| **Actif** | L’entrée du titre en cours de lecture. L’aperçu montre l’entrée dans cet état. |

L’entrée porte le style enregistré **Entrée du sommaire** : un soulignement au survol et au focus, un peu d’espace autour du texte. L’entrée en cours de lecture est en couleur principale et en gras. Son panneau **Couleurs** n’a pas de couleur des liens : l’entrée est elle-même un lien.

La partie **Sommaire** du catalogue de design donne une allure aux entrées de tous les sommaires du site : **Simple**, **Rail** ou **Pastille** ([Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)). Le bloc Sommaire lui-même a deux états, **Par défaut** et **Survol**. Il n’a pas d’onglet **Animations**.

## Le titre en cours de lecture

Pendant que le visiteur fait défiler la page, le sommaire marque l’entrée du titre qu’il lit :

- le titre le plus haut encore visible à l’écran ;
- au milieu d’une longue section, quand aucun titre n’est à l’écran, le dernier titre dépassé ;
- au-dessus du premier titre, aucune entrée.

Un clic sur une entrée la marque. Elle le reste tant que son titre est à l’écran. Un titre en bas de page, qui ne peut pas remonter en haut de l’écran, garde la marque.

**Conseil :** Placez le sommaire d’un long article dans une colonne qui reste à l’écran pendant la lecture : il montre en permanence la section lue. Réglez pour cela la **Position** de la colonne sur **Collante** ([Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/)).

## Sur téléphone

Sur un petit écran, un sommaire long se raccourcit avec **Niveau de titre maximum**, ou en gardant ses sections repliées au chargement.

## Accessibilité

- Le sommaire est annoncé comme une zone de navigation nommée **Sommaire**. Le champ **Nom de la région**, en haut de l’onglet **Réglages**, remplace ce nom, « Sur cette page » par exemple. Vide, le sommaire garde le sien, affiché en grisé.
- Chaque entrée est un lien vers l’ancre de son titre : un lien partagé mène à la bonne section.
- Un lecteur d’écran annonce l’entrée marquée comme l’emplacement courant. Sans JavaScript, le sommaire reste une liste de liens, sans entrée marquée.
- Les dépliants sont des éléments natifs du navigateur : ils s’ouvrent sans script, au clavier comme à la souris. Leur état ne se garde pas d’une visite à l’autre.

## Voir aussi

- [Titre](https://lovelyrender.com/fr/documentation/bloc-titre/)
- [Accordéon](https://lovelyrender.com/fr/documentation/bloc-accordeon/)
- [Fil d’Ariane](https://lovelyrender.com/fr/documentation/bloc-fil-d-ariane/)