<?xml version="1.0" encoding="utf-8"?>

Truncate excessive page links

Truncate excessive page links  Bad Practice
Truncate excessive page links  Best Practice

When there are numerous pages, a long pagination panel can be overwhelming. To avoid a cluttered look, smart truncation is an effective solution. This involves simplifying the pagination panel by selectively displaying the most crucial page links while hiding less important ones.

A common approach is to always show the first page, the last page, and the page the user is currently on. Intermediate pages may be hidden to reduce clutter. Another method is to display the first 3 pages, the last 3 pages, and the current page, along with 3 additional page links on either side of the current page. To access pages hidden in this range, users can interact with a three-dot icon, typically by clicking or hovering over it, revealing the concealed pages.

Improve your UX & Product skills with interactive courses that actually work