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

# Pagination

Sayfalandırma bileşenleri, kullanıcıların içerik sayfaları (arama sonuçları, veri tabloları, makale arşivleri ve ürün listeleri) arasında gezinmesine olanak tanır. [Join](/components/join) ve [Button](/components/button) bileşenlerinin oluşturulmasıyla oluşturulan Frutjam sayfalandırma, JavaScript veya ekstra CSS gerektirmez. Numaralandırılmış sayfaları, önceki/sonraki okları, üç nokta boşluklarını, erişilebilir radyo girişlerini ve sayfa atlama seçimini destekler.

Yalnızca CSS, JavaScript gerekmez; saf HTML ve Tailwind CSS ile erişilebilir sayfalandırma oluşturun. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React, Next.js ve tüm yığınlarla çalışır.

| Sınıf        | Tip         | Tanım                                                         |
| ------------ | ----------- | ------------------------------------------------------------- |
| join         | Temel       | Düğmeleri bağlı bir sayfalandırma şeridi halinde gruplandırır |
| join-item    | Değiştirici | Birleştirme içindeki her sayfa düğmesi veya girişi            |
| btn-active   | State       | Geçerli sayfayı vurgular                                      |
| btn-disabled | State       | Etkileşimli olmayan üç nokta veya kullanılamayan sayfa        |

## Temel Sayfalandırma

Bir aktif sayfaya sahip numaralandırılmış sayfa şeridi. Geçerli sayfayı vurgulamak için **btn-active** uygulayın. Sunucu tarafından oluşturulan sayfa bağlantıları için düğmeler yerine bağlantı etiketlerini kullanın.

### Boyutlar

Sayfalandırma tüm düğme boyutlarını devralır. Kompakt tablolar için **btn-xs** veya **btn-sm**'yi, öncelikli dokunmatik arayüzler için **btn-lg**'yi kullanın.

### Üç Nokta ile

Çok çeşitli sayfalar arasındaki üç nokta boşluğu için **btn-disabled**'i kullanın. Ekran okuyucular devre dışı bırakılan düğmeleri atlayarak üç nokta üzerinde `aria-hidden='true'` ile eşleştirin.

## Önceki / Sonraki Gezinme

Ok tabanlı sayfalandırma, bloglar, ürün listeleri ve tam sayfa numaralarını göstermenin pratik olmadığı tüm sayfalandırılmış yayınlar için en yaygın kalıptır.

### Ok Simgeleri ile

### Eşit Genişlikte Önceki / Sonraki

Her iki düğmeye de eşit genişlik kazandırmak için birleştirme kapsayıcısında bir **grid grid-cols-2** sarmalayıcı kullanın; mobil öncelikli düzenler ve tam genişlikte sayfalandırma çubukları için idealdir.

### İlk / Son ile

Kullanıcıların doğrudan ilk veya son sayfaya atlamasını sağlamak için çift ok düğmeleri ekleyin. Yüzlerce sayfalık veri tabloları için kullanışlıdır.

## Erişilebilir Radyo Sayfalandırması

Tamamen klavyeyle gezinilebilen, JavaScript olmadan yalnızca CSS sayfa seçimi için birleştirme öğeleri olarak `type="radio"` girişlerini kullanın. Her giriş, seçilen durumu yerel form durumunda tutarken basılabilir bir düğme görevi görür.

## Sayfa Atlama ile Sayfalandırma

Kullanıcıların doğrudan herhangi bir sayfaya geçmesine olanak tanıyan kompakt bir sayfalandırma çubuğu için birleştirmeyi, düğmeleri ve seçimi birleştirin; yönetici kontrol panellerinde, CMS arayüzlerinde ve veri ağırlıklı uygulamalarda yaygındır. Seçimin kendisi için JavaScript gerekmez; HTMX ile eşleştirin veya sunucu tarafında gezinme için bir form gönderin.

## Anahat Stili

İkincil içerik bölümlerine ve kenar çubuklarına uyacak şekilde daha hafif bir görsel ağırlık için tüm düğmelerde **btn-outline**'ı kullanın.