---
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/pl/components/pagination
---

# Pagination

Komponenty paginacji umożliwiają użytkownikom nawigację pomiędzy stronami treści — wynikami wyszukiwania, tabelami danych, archiwami artykułów i listami produktów. Zbudowana w oparciu o komponenty [Dołącz](/components/join) i [Button](/components/button), paginacja Frutjam nie wymaga JavaScript ani dodatkowego CSS. Obsługuje numerowane strony, strzałki poprzedniej/następnej, przerwy w wielokropkach, dostępne wejścia radiowe i wybór przeskakiwania między stronami.

Tylko CSS, nie wymaga JavaScript — twórz przystępną paginację za pomocą czystego HTMX i CSS Tailwind. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React, Next.js i dowolnym stosem.

| Klasa        | Typ         | Opis                                                        |
| ------------ | ----------- | ----------------------------------------------------------- |
| join         | Opierać     | Grupuje przyciski w połączony pasek stronicowania           |
| join-item    | Modyfikator | Każdy przycisk strony lub dane wejściowe wewnątrz złączenia |
| btn-active   | State       | Podświetla bieżącą stronę                                   |
| btn-disabled | State       | Nieinteraktywny wielokropek lub strona niedostępna          |

## Podstawowa paginacja

Numerowany pasek strony z jedną aktywną stroną. Zastosuj **btn-active**, aby podświetlić bieżącą stronę. Używaj tagów zakotwiczeń zamiast przycisków dla linków do stron renderowanych przez serwer.

### Rozmiary

Paginacja dziedziczy wszystkie rozmiary przycisków. Użyj **btn-xs** lub **btn-sm** w przypadku tabel kompaktowych i **btn-lg** w przypadku interfejsów dotykowych.

### Z elipsą

Użyj opcji **btn-disabled** w przypadku odstępu wielokropka między dużym zakresem stron. Czytniki ekranu pomijają wyłączone przyciski, więc sparuj je z `aria-hidden="true"` w wielokropku.

## Poprzednia/Następna nawigacja

Paginacja oparta na strzałkach jest najczęstszym wzorcem w przypadku blogów, list produktów i wszelkich kanałów podzielonych na strony, w których pokazanie dokładnych numerów stron nie jest praktyczne.

### Z Ikonami Strzałek

### Równa szerokość Poprzedni / Następny

Użyj opakowania **grid grid-cols-2** na kontenerze łączenia, aby zapewnić obu przyciskom równą szerokość — idealne rozwiązanie w przypadku układów dostosowanych przede wszystkim do urządzeń mobilnych i pasków stronicowania o pełnej szerokości.

### Z Pierwszym/Ostatnim

Dodaj przyciski z podwójną strzałką, aby umożliwić użytkownikom przejście bezpośrednio do pierwszej lub ostatniej strony. Przydatne w przypadku tabel danych zawierających setki stron.

## Dostępna paginacja radia

Użyj danych wejściowych `type="radio"` jako elementów łączenia, aby w pełni poruszać się za pomocą klawiatury i wybierać strony wyłącznie za pomocą CSS, bez JavaScript. Każde wejście działa jak przycisk, który można nacisnąć, utrzymując wybrany stan w stanie natywnym.

## Paginacja za pomocą przeskoku strony

Połącz łączenie, przyciski i opcję wyboru, aby uzyskać kompaktowy pasek paginacji, który pozwala użytkownikom przejść bezpośrednio do dowolnej strony — często w panelach administracyjnych, interfejsach CMS i aplikacjach wymagających dużej ilości danych. Dla samego zaznaczenia nie jest wymagana obsługa JavaScript; sparuj z HTMX lub formularzem przesłanym do nawigacji po stronie serwera.

## Styl konturu

Użyj **btn-outline** na wszystkich przyciskach, aby uzyskać mniejszą wagę wizualną, która pasuje do sekcji treści dodatkowych i pasków bocznych.