W3.CSSLesson 46Free preview

W3.CSS Pagination

This lesson is part of W3.CSS · All levels

Summary

Pagination breaks down long lists into several pages so that users can easily search for content. In W3.CSS this pattern is built from .w3-bar as a wrap and .w3-bar-item .w3-button as a number button. The active page is assigned a color plus attribute aria-current class to make it clear to all users.

Key points

Use .w3-bar as a page button row wrapper
Each button uses .w3-bar-item .w3-button to appear uniform
Mark the active page with the color and aria-current="page"
Add the Prev and Next buttons at both ends of the sequence
Pack with the element <nav> and give the aria-labels

Full lesson

Code examples and quizzes

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