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

# Pagination

Komponen paginasi memungkinkan pengguna menavigasi antar halaman konten — hasil pencarian, tabel data, arsip artikel, dan daftar produk. Dibuat dengan menyusun komponen [Gabung](/components/join) dan [Tombol](/components/button), penomoran halaman Frutjam tidak memerlukan JavaScript dan CSS tambahan. Mendukung halaman bernomor, panah sebelumnya/berikutnya, celah elipsis, input radio yang dapat diakses, dan pilihan lompat halaman.

Khusus CSS, tidak memerlukan JavaScript — buat paginasi yang dapat diakses dengan HTMX murni dan Tailwind CSS. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, Next.js, dan tumpukan apa pun.

| Kelas        | Jenis    | Keterangan                                                            |
| ------------ | -------- | --------------------------------------------------------------------- |
| join         | Basis    | Mengelompokkan tombol ke dalam strip penomoran halaman yang terhubung |
| join-item    | Pengubah | Setiap tombol halaman atau masukan di dalam gabungan                  |
| btn-active   | State    | Menyorot halaman saat ini                                             |
| btn-disabled | State    | Elipsis non-interaktif atau halaman tidak tersedia                    |

## Paginasi Dasar

Strip halaman bernomor dengan satu halaman aktif. Terapkan **btn-active** untuk menyorot halaman saat ini. Gunakan tag jangkar alih-alih tombol untuk tautan halaman yang dirender oleh server.

### Ukuran

Pagination mewarisi semua ukuran tombol. Gunakan **btn-xs** atau **btn-sm** untuk tabel ringkas dan **btn-lg** untuk antarmuka yang mengutamakan sentuhan.

### Dengan Ellipsis

Gunakan **btn-disabled** untuk celah elipsis di antara sejumlah besar halaman. Pembaca layar melewatkan tombol yang dinonaktifkan, jadi pasangkan dengan `aria-hidden="true"` pada elipsis.

## Navigasi Sebelumnya / Berikutnya

Penomoran halaman berbasis panah adalah pola paling umum untuk blog, daftar produk, dan feed yang diberi nomor halaman yang tidak praktis untuk menampilkan nomor halaman persisnya.

### Dengan Ikon Panah

### Lebar Sama Sebelumnya / Berikutnya

Gunakan wrapper **grid grid-cols-2** pada wadah gabungan untuk memberikan lebar yang sama pada kedua tombol — ideal untuk tata letak yang mengutamakan seluler dan bilah penomoran halaman dengan lebar penuh.

### Dengan Pertama / Terakhir

Tambahkan tombol panah ganda agar pengguna dapat melompat langsung ke halaman pertama atau terakhir. Berguna untuk tabel data dengan ratusan halaman.

## Paginasi Radio yang Dapat Diakses

Gunakan input `type="radio"` sebagai item gabungan untuk pemilihan halaman khusus CSS yang sepenuhnya dapat dinavigasi dengan keyboard dan tanpa JavaScript. Setiap input bertindak sebagai tombol yang dapat ditekan sekaligus menjaga status yang dipilih dalam bentuk aslinya.

## Paginasi dengan Page Jump

Gabungkan gabungan, tombol, dan pilihan untuk bilah penomoran halaman ringkas yang memungkinkan pengguna melompat langsung ke halaman mana pun — umum di dasbor admin, antarmuka CMS, dan aplikasi yang membutuhkan banyak data. Tidak diperlukan JavaScript untuk pemilihan itu sendiri; pasangkan dengan HTMX atau pengiriman formulir untuk navigasi sisi server.

## Gaya Garis Besar

Gunakan **btn-outline** pada semua tombol untuk bobot visual yang lebih ringan dan sesuai dengan bagian konten sekunder dan sidebar.