Pagination

v2.1

Pagination breaks large data sets into multiple pages for easier consumption. Controls are included to navigate between pages and manage how much content is shown at once. This is primarily an HTML pattern.

Skin
Marko
React

Guidelines

Our accessibility section covers only the key considerations that impact design thinking at a page level, such as keyboard interaction, heading structure and landmarks. For exhaustive pattern level details & guidance for the web, please visit eBay MIND Patterns.

Keyboard interaction

Tab Sequence collapsed

Left paddle link
Link 1
Link 2
Link 3
Link 4
Link 5
Overflow button*
Link 8
Right paddle link

*Each entry in the overflow is a text link, reachable with TAB and SHIFT+TAB keys.

Tab sequence expanded

Left paddle link
Link 1
Link 2
Link 3
Link 4
Link 5
Overflow button*
Link 8
Right paddle link

*Each entry in the overflow is a text link, reachable with TAB and SHIFT+TAB keys.

Focus management

If pagination updates a portion of the screen, keyboard focus remains on the page number button element. If pagination navigates to a new page, focus will automatically be taken to the beginning of that new page.

Pagination control showing selected page 3 with options to navigate to pages 1, 2, 4, 5, or to the last page, number 8.

Current page

The current view (visually indicated by the line below the page number) uses aria-current=page. Learn more eBay Mind Patterns.