pagination simple minimal previous-next pagination simple previous next minimal page-indicator simple previous next pagination minimal page navigation
Pagination Simple
Fetch pattern JSON:
curl https://webspire.de/patterns/pagination/simple.json simple.html
<nav aria-label="Pagination" class="ws-pagination flex items-center justify-between">
<a href="#" class="inline-flex items-center gap-2 rounded-lg border border-[var(--ws-pagination-border)] px-4 py-2 text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/></svg>
Previous
</a>
<span class="text-sm text-[var(--ws-pagination-text)]">Page 3 of 10</span>
<a href="#" class="inline-flex items-center gap-2 rounded-lg border border-[var(--ws-pagination-border)] px-4 py-2 text-sm font-medium text-[var(--ws-pagination-text)] transition hover:bg-[var(--ws-pagination-hover-bg)]">
Next
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
</a>
</nav>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
paginationsimpleminimalprevious-next
Slots
| Name | Required | Description |
|---|---|---|
| previous | Yes | Previous page button with arrow icon. |
| indicator | Yes | Page X of Y text indicator. |
| next | Yes | Next page button with arrow icon. |
Minimal pagination with Previous and Next buttons flanking a “Page X of Y” indicator. Best for sequential content like blog posts or multi-step flows.