Composants

Pagination

La pagination permet de parcourir une liste découpée en pages : opérations d’un compte, agences, résultats de recherche. Elle se construit avec une liste .pagination dans un élément <nav>.

Exemple de base#

Chaque page est un .page-item contenant un .page-link. Entourez la liste d’un <nav> avec un aria-label qui décrit son rôle.

<nav aria-label="Pages des opérations">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Précédent</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Suivant</a></li>
  </ul>
</nav>

Icônes#

Remplacez les mots par des chevrons pour gagner de la place. Ajoutez alors un aria-label sur le lien, et masquez le symbole avec aria-hidden="true".

<nav aria-label="Pages des agences">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page précédente"><span aria-hidden="true">&laquo;</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Page suivante"><span aria-hidden="true">&raquo;</span></a>
    </li>
  </ul>
</nav>

Page active et éléments désactivés#

.active met en valeur la page courante ; ajoutez aria-current="page" sur le lien. .disabled grise un élément, par exemple « Précédent » sur la première page. Sur un lien désactivé, ajoutez aria-disabled="true" et tabindex="-1", ou remplacez-le par un <span>.

<nav aria-label="Pages des prêts">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Précédent</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Suivant</a></li>
  </ul>
</nav>
<nav aria-label="Dernière page">
  <ul class="pagination mb-0">
    <li class="page-item"><a class="page-link" href="#">Précédent</a></li>
    <li class="page-item"><a class="page-link" href="#">8</a></li>
    <li class="page-item active"><a class="page-link" href="#" aria-current="page">9</a></li>
    <li class="page-item disabled"><span class="page-link">Suivant</span></li>
  </ul>
</nav>

Tailles#

.pagination-lg et .pagination-sm agrandissent ou réduisent les éléments.

<nav aria-label="Grande pagination">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
<nav aria-label="Petite pagination">
  <ul class="pagination pagination-sm mb-0">
    <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Alignement#

La liste est un conteneur flex : utilisez .justify-content-center ou .justify-content-end pour la déplacer.

<nav aria-label="Pagination centrée">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled"><span class="page-link">Précédent</span></li>
    <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Suivant</a></li>
  </ul>
</nav>
<nav aria-label="Pagination à droite">
  <ul class="pagination justify-content-end mb-0">
    <li class="page-item disabled"><span class="page-link">Précédent</span></li>
    <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Suivant</a></li>
  </ul>
</nav>

Longue série avec ellipse#

Pour beaucoup de pages, affichez la première, la dernière et celles autour de la page courante, séparées par une ellipse non cliquable.

<nav aria-label="Historique des virements">
  <ul class="pagination flex-wrap">
    <li class="page-item"><a class="page-link" href="#">Précédent</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item disabled"><span class="page-link">…</span></li>
    <li class="page-item"><a class="page-link" href="#">11</a></li>
    <li class="page-item active" aria-current="page"><span class="page-link">12</span></li>
    <li class="page-item"><a class="page-link" href="#">13</a></li>
    <li class="page-item disabled"><span class="page-link">…</span></li>
    <li class="page-item"><a class="page-link" href="#">40</a></li>
    <li class="page-item"><a class="page-link" href="#">Suivant</a></li>
  </ul>
</nav>

Classes

Classes
Classe	Rôle
`.pagination`	Liste flex des pages (variables `--bs-pagination-*`).
`.page-item`	Élément de liste ; reçoit `.active` ou `.disabled`.
`.page-link`	Lien ou texte d’une page.
`.pagination-lg`, `.pagination-sm`	Tailles grande et petite.
`.active`	Page courante (sur `.page-item`).
`.disabled`	Élément non activable (sur `.page-item`).

Variables Sass

Variables Sass
Variable	Valeur par défaut
`$pagination-padding-y`	`.375rem`
`$pagination-padding-x`	`.75rem`
`$pagination-padding-y-sm`	`.25rem`
`$pagination-padding-x-sm`	`.5rem`
`$pagination-padding-y-lg`	`.75rem`
`$pagination-padding-x-lg`	`1.5rem`
`$pagination-font-size`	`$font-size-base`
`$pagination-color`	`var(--bs-link-color)`
`$pagination-bg`	`var(--bs-body-bg)`
`$pagination-border-radius`	`var(--bs-border-radius)`
`$pagination-border-color`	`var(--bs-border-color)`
`$pagination-hover-color`	`var(--bs-link-hover-color)`
`$pagination-hover-bg`	`var(--bs-tertiary-bg)`
`$pagination-active-color`	`$component-active-color`
`$pagination-active-bg`	`$component-active-bg`
`$pagination-disabled-color`	`var(--bs-secondary-color)`
`$pagination-disabled-bg`	`var(--bs-secondary-bg)`
`$pagination-border-radius-sm`	`var(--bs-border-radius-sm)`
`$pagination-border-radius-lg`	`var(--bs-border-radius-lg)`

Personnalisation#

Pour des pages arrondies, modifiez le rayon des liens ; les variables CSS permettent un réglage local.

// Sass : pages rondes et plus aérées
$pagination-padding-x: 1rem;
$pagination-border-radius: 2rem;

// CSS : une pagination précise
.pagination-releves {
  --bs-pagination-color: #1f2a37;
  --bs-pagination-hover-bg: #E8F0FA;
  --bs-pagination-active-bg: #387A1B;
  --bs-pagination-active-border-color: #387A1B;
}

Bonnes pratiques

À faire

Entourez la pagination d’un <nav> avec un aria-label précis (« Pages des opérations »).
Indiquez la page courante avec .active et aria-current="page".
Désactivez « Précédent » sur la première page et « Suivant » sur la dernière, au lieu de les retirer.
Affichez le nombre total de résultats près de la pagination (« 120 opérations »).

À éviter

N’affichez pas toutes les pages d’une longue série : utilisez une ellipse.
Ne remplacez pas les libellés par des icônes sans aria-label.
N’utilisez pas la pagination pour une suite d’étapes d’un parcours : préférez une barre de progression.

Accessibilité

Pour un symbole décoratif (« « », « » »), ajoutez aria-hidden="true" et placez le nom accessible dans aria-label sur le lien.
Un élément désactivé qui reste un lien doit avoir aria-disabled="true" et tabindex="-1" ; utilisez un <span class="page-link"> si aucune action n’est possible.
Une ellipse doit être un élément désactivé : elle ne doit pas être atteignable au clavier.
Les cibles tactiles doivent rester assez grandes : évitez .pagination-sm pour des écrans tactiles.