Pagination

Navigation entre pages de résultats : précédent / numéros / suivant, états actif et désactivé, ellipse.

Exemple

<nav class="bj-pagination" aria-label="Pagination">
  <button type="button" class="bj-pagination__nav bj-pagination__nav--disabled" disabled aria-label="Page précédente">
    <i class="ri-arrow-left-s-line" aria-hidden="true"></i>
  </button>
  <button type="button" class="bj-pagination__link" aria-label="Page 1">1</button>
  <button type="button" class="bj-pagination__link bj-pagination__link--active" aria-current="page" aria-label="Page 2">2</button>
  <button type="button" class="bj-pagination__link" aria-label="Page 3">3</button>
  <button type="button" class="bj-pagination__nav" aria-label="Page suivante">
    <i class="ri-arrow-right-s-line" aria-hidden="true"></i>
  </button>
</nav>

Avec ellipse

L’ellipse bj-pagination__ellipsis sépare visuellement les plages de pages (comme le composant Vue avec beaucoup de pages).

<nav class="bj-pagination" aria-label="Pagination">
  <button type="button" class="bj-pagination__nav" aria-label="Page précédente">
    <i class="ri-arrow-left-s-line" aria-hidden="true"></i>
  </button>
  <button type="button" class="bj-pagination__link">1</button>
  <span class="bj-pagination__ellipsis" aria-hidden="true">...</span>
  <button type="button" class="bj-pagination__link bj-pagination__link--active" aria-current="page">5</button>
  <span class="bj-pagination__ellipsis" aria-hidden="true">...</span>
  <button type="button" class="bj-pagination__link">20</button>
  <button type="button" class="bj-pagination__nav" aria-label="Page suivante">
    <i class="ri-arrow-right-s-line" aria-hidden="true"></i>
  </button>
</nav>

Variantes

bj-pagination__nav--disabled sur les boutons préc./suiv. ; bj-pagination__label visible depuis le breakpoint médian. Les numéros utilisent bj-pagination__link et bj-pagination__link--active (ou aria-current="page").

Classes CSS

Classe	Description
`bj-pagination`	Conteneur <code>nav</code>.
`bj-pagination__link`	Bouton (ou lien) pour un numéro de page.
`bj-pagination__link--active`	Page courante (style plein).
`bj-pagination__link--disabled`	Numéro non cliquable (liens statiques).
`bj-pagination__ellipsis`	Séparateur entre plages.
`bj-pagination__nav`	Bouton précédent ou suivant (icône).
`bj-pagination__nav--disabled`	État désactivé des boutons préc./suiv.
`bj-pagination__label`	Libellé texte Précédent / Suivant.

Accessibilité