About this set
Three pagination patterns designed for narrow screens and touch. Condensed to the neighbours shows only the pages either side of the current one plus the last page, so a 40-page list fits inside a 330px container; the dashed frame in the demo marks that width. Large tap targets raises every link to 46 by 46 pixels, comfortably above the 44px touch-target guideline, for apps and kiosk-style layouts with only a few pages. Jump to page replaces the numbers entirely with a native select between two arrows, reading Page 12 of 40, which is the quickest way through very long lists on a phone because it opens the system picker. All three are links inside a nav labelled Pagination, with aria-current on the active page and named arrow links, and the select is wrapped in its label so the words around it become its accessible name. The Bootstrap version uses .pagination for the rows and .form-select for the picker; the Tailwind version keeps the native select and styles it with utilities.
What’s included
- Condensed row that fits a 330px container
- 46px tap targets for touch interfaces
- Jump-to-page select between previous and next arrows
- Native select opens the system picker on phones
- Bootstrap version uses .pagination and .form-select
Accessibility
Each control is a nav labelled Pagination with aria-current="page" on the active link and Previous page / Next page names on the arrows. The page select is wrapped in its label, and its border reaches 3:1 contrast against the white background. Links and the select show a 2px blue focus outline, and hover transitions are removed under prefers-reduced-motion.
Customise it
In plain CSS change the 46px size on .tap a, the 330px max-width on .narrow and the #8491a5 select border. In Bootstrap edit the .pagination-tap and .pagination-jump rules and the pagination variables on .pagination-uic. In Tailwind swap h-[46px] min-w-[46px], max-w-[330px] and --color-brand.
