---
title: "Pagination"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS pagination. Numbered pages, prev/next arrows, page jump select — no JavaScript. WCAG accessible, works with Django, HTMX, Laravel, React."
url: https://frutjam.com/fr/components/pagination
---

# Pagination

Les composants de pagination permettent aux utilisateurs de naviguer entre les pages de contenu : résultats de recherche, tableaux de données, archives d'articles et listes de produits. Construite en composant les composants [Join](/components/join) et [Button](/components/button), la pagination Frutjam ne nécessite ni JavaScript ni CSS supplémentaire. Prend en charge les pages numérotées, les flèches précédent/suivant, les espaces de points de suspension, les entrées radio accessibles et une sélection de saut de page.

CSS uniquement, aucun JavaScript requis : créez une pagination accessible avec du HTMX pur et du CSS Tailwind. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React, Next.js et n'importe quelle pile.

| Classe       | Taper        | Description                                                  |
| ------------ | ------------ | ------------------------------------------------------------ |
| join         | Base         | Regroupe les boutons dans une bande de pagination connectée  |
| join-item    | Modificateur | Chaque bouton de page ou entrée à l'intérieur de la jointure |
| btn-active   | State        | Met en surbrillance la page actuelle                         |
| btn-disabled | State        | Points de suspension non interactifs ou page indisponible    |

## Pagination de base

Une bande de pages numérotées avec une page active. Appliquez **btn-active** pour mettre en surbrillance la page actuelle. Utilisez des balises d'ancrage au lieu de boutons pour les liens de page rendus par le serveur.

### Sizes

La pagination hérite de toutes les tailles de boutons. Utilisez **btn-xs** ou **btn-sm** pour les tables compactes et **btn-lg** pour les interfaces tactiles.

### Avec points de suspension

Utilisez **btn-disabled** pour les points de suspension entre une large gamme de pages. Les lecteurs d'écran ignorent les boutons désactivés, alors associez-les à `aria-hidden="true"` sur les points de suspension.

## Navigation Précédent / Suivant

La pagination basée sur des flèches est le modèle le plus courant pour les blogs, les listes de produits et tout flux paginé pour lequel l'affichage des numéros de page exacts n'est pas pratique.

### Avec des icônes de flèche

### Précédent / Suivant à largeur égale

Utilisez un wrapper **grid grid-cols-2** sur le conteneur de jointure pour donner aux deux boutons une largeur égale : idéal pour les mises en page destinées aux mobiles et les barres de pagination pleine largeur.

### Avec premier/dernier

Ajoutez des boutons à double flèche pour permettre aux utilisateurs d'accéder directement à la première ou à la dernière page. Utile pour les tableaux de données comportant des centaines de pages.

## Pagination radio accessible

Utilisez les entrées `type="radio"` comme éléments de jointure pour une sélection de page entièrement navigable au clavier, uniquement en CSS, sans JavaScript. Chaque entrée agit comme un bouton pressable tout en conservant l’état sélectionné dans son état natif.

## Pagination avec saut de page

Combinez la jointure, les boutons et la sélection pour obtenir une barre de pagination compacte qui permet aux utilisateurs d'accéder directement à n'importe quelle page, ce qui est courant dans les tableaux de bord d'administration, les interfaces CMS et les applications gourmandes en données. Aucun JavaScript requis pour la sélection elle-même ; associez-le à HTMX ou à un formulaire soumis pour la navigation côté serveur.

## Style de contour

Utilisez **btn-outline** sur tous les boutons pour un poids visuel plus léger qui convient aux sections de contenu secondaire et aux barres latérales.