MenusLesson 50Free preview

Pagination

This lesson is part of How To · All levels

Summary

Pagination divides the long list into several numbered pages to make the content easier to read and the pages less overweight. These components usually contain the previous button, page number, and the next button. The active page markers and accessibility labels make navigation clear to all users.

Key points

Use the nav element with the aria-labels to make pagination recognizable as navigation.
The .active and aria-current="page" classes mark the page being opened.
Display: flex or inline-block arranges the page number in a single row.
The padding and the border-radius make each number look like a button you can click.
On a small screen, some numbers can be hidden or made closer.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.