Pagination (Pagination)

Utilisez la pagination pour parcourir une liste découpée en pages.

info

Ce composant est inclus dans l’offre Community.

Information	Valeur
Niveau	Community
Composants Twig	dsfr:pagination

Usage

• La page courante porte aria-current="page".
• Les liens précédent et suivant exposent rel="prev" et rel="next".

Modes d'utilisation

Exemple principal

Pagination · exemple principal

<twig:dsfr:pagination
  currentPage="3"
  totalPages="12"
  urlPattern="/dossiers?page=%d"
/>

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:pagination
  id="pagination-example"
  class="fr-mt-2w"
  data-controller="pagination"
/>

API publique

Composant	Rôle
dsfr:pagination	Composant principal de cette page.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
currentPage	int|string	1	Page courante.
totalPages	int|string	1	Nombre total de pages.
urlPattern	string	""	Pattern sprintf, par exemple /page/%d.

Guide d'intégration

Question	Réponse
Famille DSFR	Navigation
Quand l'utiliser	Quand l’usager doit se repérer, changer de section ou parcourir une liste de pages.
Quand éviter	Pour déclencher une action métier immédiate : utilisez plutôt un bouton.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:pagination.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Pagination : options, accessibilité et rendu DSFR

Variantes de pagination

• pagination avec attributs HTML pass-through pour id, class, data-* et aria-* quand le template le permet.

Points de contrôle propres à ce composant

• La page courante porte aria-current="page".
• Les liens précédent et suivant exposent rel="prev" et rel="next".

Accessibilité navigation

• Le libellé de navigation doit être explicite avec ariaLabel ou un titre visible.
• La page courante doit être indiquée avec active, current ou aria-current selon le composant.
• Les panneaux contrôlés par JavaScript DSFR doivent avoir des id uniques et stables.

Intégration Symfony/Twig pour dsfr:pagination

• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:pagination quand ils concernent son nœud racine.

Checklist de recette

• navigation clavier complète
• état actif visible
• liaison aria-controls vers un élément existant
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.