Design a clickable pagination control with smart ellipsis truncation. Try it live in the preview, then copy clean HTML and CSS.
This isn't a static mockup — the preview responds to real clicks so you can check how truncation and active states feel before you copy anything.
Click any page number or dot in the preview to change the active page.
Large page counts collapse into first, last, current ±1 and ellipsis gaps.
Get HTML and CSS that matches the exact state you're previewing.
Pagination exists to make long result sets manageable: instead of forcing a browser to render (and a visitor to scroll through) thousands of rows at once, a list is split into pages with a control for moving between them. Done well, pagination also communicates scale — seeing "page 4 of 96" tells a visitor roughly how much content exists without them having to count it. The trickiest part is usually large page counts, where showing every single page number would overwhelm the control, which is why most real-world pagination collapses the middle into an ellipsis and keeps only the pages nearest the current one, plus the first and last page, always reachable.
Showing first, last, and a small window around the current page keeps the control a predictable width no matter how many pages exist.
Numbered controls suit data tables and search results; dot indicators suit lightweight galleries or carousels where exact counts matter less.
Wrapping the control in a nav with aria-label="Pagination" and disabling the previous/next buttons at the ends helps assistive technology and keyboard users.
For infinite or unknown-length lists, a simple previous/next control with a page label avoids implying a false sense of total size.
Pagination splits a long list of results across multiple pages and gives visitors a control to move between them, which keeps individual pages fast and easy to scan instead of one very long list.
This tool always shows the first page, the last page, and the pages immediately around the current page, replacing any gap larger than one page with an ellipsis, so large page counts stay compact and readable.
Yes. The preview is a real interactive control, not a static image. Clicking any page number or dot updates the active page and regenerates the copyable code to match.
You can generate a fully numbered control, a minimal dots-only control, or a simple previous/next control with a page count label, in square, rounded or pill shapes.
Yes. It is completely free, requires no account, and builds all HTML and CSS locally in your browser.
Keep building your site's navigation and layout with these free online tools.