Generate accessible pagination navigation in seconds. Set your page count and current page, pick a style and get clean HTML, ready-to-use CSS and a live preview — with smart ellipsis for long page lists.
Live preview
How to Use
- Enter the total number of pages and the current page.
- Choose a Rounded or Pills style, and toggle Previous / Next links.
- Press Generate pagination — or just type, the preview updates live.
- Copy the HTML and CSS into your site.
Key Features
- Smart ellipsis — long page lists collapse neatly with an ellipsis.
- Two styles — rounded corners or pill-shaped page buttons.
- Accessible markup — nav landmark, labels and aria-current on the active page.
- 100% private — runs entirely in your browser; nothing is sent or stored.
FAQs
When does the ellipsis appear?
For more than seven pages, the list shows the first page, pages around the current one and the last page, with an ellipsis marking the gaps.
Can I change the colours?
Yes — the generated CSS is a clean starting point. Adjust colours, spacing and borders to match your theme.
Do the links work out of the box?
The links use # placeholders. Point each href at your real page URLs before publishing.
Is my data sent anywhere?
No. Everything runs entirely in your browser and never transmits or saves your entries.
Related Tools
Try these related tools: CSS Breadcrumb Generator, CSS Button Generator, CSS Tabs Generator.