Système de design GCComposants
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Pagination
<gcds-pagination>

Autres noms : index de pages, navigation de pages. La pagination est un composant de navigation qui répartit un contenu sur plusieurs pages liées.
  • GitHub
  • Figma

Aperçu du composant de la pagination

Structure de la pagination

Structure de la pagination simple

  • Le lien précédent mène vers la page précédente dans la séquence lorsqu’il est sélectionné.
  • Le chevron précédent est une aide visuelle qui indique qu’on navigue en arrière dans la séquence de pages.
  • Le texte Précédent est le texte qui accompagne le chevron précédent. Il indique qu’une personne naviguera vers la page précédente dans la séquence.
  • Le libellé de la page précédente fournit un contexte sur la page vers laquelle une personne reviendra.
  • Le lien suivant mène vers la page suivante dans la séquence lorsqu’il est sélectionné.
  • Le chevron suivant est une aide visuelle qui indique qu’on navigue en avantdans la séquence de pages.
  • Le texte Suivant est le texte qui accompagne le chevron suivant. Il indique que la personne naviguera vers la page suivante dans la séquence.
  • Le libellé de la page suivante fournit un contexte sur la page vers laquelle une personne naviguera ensuite.
Le composant de pagination, avec des numéros pointant vers les différentes parties de la structure de la pagination simple.

Structure de la pagination sous forme de liste

Écrans de grande taille

  • Le lien précédent mène vers la page précédente dans la séquence lorsqu’il est sélectionné.
  • Le chevron précédent est une aide visuelle qui indique qu’on navigue en arrière dans la séquence de pages.
  • Le texte Précédent est le texte qui accompagne le chevron précédent. Il indique qu’une personne naviguera vers la page précédente dans la séquence.
  • Un lien de page mène vers la page correspondante dans la séquence.
  • La page actuelle indique la page sur laquelle la personne se trouve actuellement.
  • Les points de suspension remplacent toutes les pages qui ne s’affichent pas.
  • Le texte Suivant est le texte qui accompagne le chevron suivant. Il indique que la personne naviguera vers la page suivante dans la séquence.
  • Le chevron suivant est une aide visuelle qui indique qu’on navigue en avantdans la séquence de pages.
  • Le lien suivant mène vers la page suivante du flux lorsqu’il est sélectionné.
Le composant de pagination, avec des numéros pointant vers les différentes parties de la structure de la pagination sous forme de liste sur écran de grande taille.

Écrans de petite taille

  • Un lien de page mène vers la page correspondante dans la séquence.
  • La page actuelle indique la page sur laquelle la personne se trouve actuellement.
  • Les points de suspension remplacent toutes les pages qui ne s’affichent pas.
  • Le lien précédent mène vers la page précédente dans la séquence lorsqu’il est sélectionné.
  • Le chevron précédent est une aide visuelle qui indique qu’on navigue en arrière dans la séquence de pages.
  • Le texte Précédent est le texte qui accompagne le chevron précédent. Il indique qu’une personne naviguera vers la page précédente dans la séquence.
  • Le texte Suivant est le texte qui accompagne le chevron suivant. Il indique que la personne naviguera vers la page suivante dans la séquence.
  • Le chevron suivant est une aide visuelle qui indique qu’on navigue en avant dans la séquence de pages.
  • Le lien suivant mène vers la page suivante dans la séquence lorsqu’il est sélectionné.
Le composant de pagination, avec des numéros pointant vers les différentes parties de la structure de la pagination sous forme de liste sur écran de petite taille.

Design et accessibilité pour le composant pagination

Rendez le contenu de la pagination facile à trouver

  • Placez les informations les plus importantes sur les premières pages afin qu’elles soient plus visibles.
  • Placez le composant de pagination immédiatement sous le contenu de la page, aligné à gauche.
  • Affichez les liens de navigation de manière à favoriser le balayage visuel :
    • sur une seule ligne, sans retour à la ligne, pour la pagination en liste;
    • empilés verticalement, pour aider les personnes utilisant un logiciel d’agrandissement d’écran, dans le cas de la pagination simple.

Aidez les personnes à comprendre où elles se trouvent

  • Dans la pagination simple, utilisez un libellé sous les textes « Précédent » et « Suivant » pour indiquer la position de l’utilisateur dans la séquence. Incluez soit le titre de la page, soit le numéro de page par rapport au nombre total de pages afin de fournir un contexte sur les pages adjacentes.
  • Évitez d’afficher le lien « Précédent » sur la première page ou le lien « Suivant » sur la dernière page.

Affichez un nombre approprié de pages

Dans la pagination sous forme de liste, affichez suffisamment de liens de pages pour remplir l’espace horizontal disponible. Affichez toujours :
  • la page actuelle;
  • la première et la dernière page;
  • les pages immédiatement avant et après la page actuelle.
Sur les écrans plus grands, affichez des pages supplémentaires avant et après la page actuelle lorsque l’espace le permet.
Aidez-nous à nous améliorer Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact. Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes. Fournir des commentaires Signaler un problème sur GitHub
2026-02-12