Pagination
Seitennavigation mit intelligenter Ellipsis-Logik. Zeigt immer die erste, letzte und umliegenden Seiten an. Unterstützt aria-current="page" und beschriftete Links für Screenreader.
Wenige Seiten
Bei 5 oder weniger Seiten werden alle angezeigt, ohne Ellipsis.
5 Seiten, aktuelle Seite 3
<Pagination currentPage={3} totalPages={5} baseUrl="/blog" />Viele Seiten
Bei mehr Seiten erscheinen Ellipsis-Punkte, um die Navigation kompakt zu halten.
20 Seiten, aktuelle Seite 8
<Pagination currentPage={8} totalPages={20} baseUrl="/news" />Sehr viele Seiten
100 Seiten, aktuelle Seite 42
<Pagination currentPage={42} totalPages={100} baseUrl="/archiv" />Erste und letzte Seite
Am Anfang und Ende der Navigation werden Prev/Next automatisch deaktiviert.
Erste Seite
<Pagination currentPage={1} totalPages={20} baseUrl="/artikel" />Mehr Kontext
Mit surroundingPages laesst sich die Anzahl der sichtbaren Nachbarseiten erhöhen.
surroundingPages={2}
<Pagination currentPage={10} totalPages={20} baseUrl="/suche" surroundingPages={2} />Installation
cp-components add pagination