Pagination
This cookbook pattern demonstrates the navigation pattern used to display pagination, where the user can move between pages of content such as search results.
Requirements
The pagination pattern typically displays items in a row. To ensure that the pagination is understandable by people using a screen reader, we mark the items up as a list inside a<nav> element, and then use CSS to display the layout visually as a row.
Typically, the pagination component will be centered horizontally underneath the content.
Recipe
Click "Play" in the code blocks below to edit the example in the MDN Playground:
<nav aria-label="pagination"> <ul> <li> <a href=""> <span aria-hidden="true">«</span> <span>previous set of pages</span> </a> </li> <li> <a href=""><span>page </span>1</a> </li> <li> <a href="" aria-current="page"> <span>page </span>2 </a> </li> <li> <a href=""> <span>page </span>3 </a> </li> <li> <a href=""> <span>page </span>4 </a> </li> <li> <a href=""> <span>next set of pages</span ><span aria-hidden="true">»</span> </a> </li> </ul></nav>.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: auto; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap;}nav { border-top: 1px solid #eeeeee; margin-top: 1em; padding-top: 0.5em; font: 1.2em sans-serif; display: flex; justify-content: center;}.pagination { list-style: none; margin: 0; padding: 0; display: flex;}.pagination li { margin: 0 1px;}.pagination a { display: block; padding: 0.5em 1em; border: 1px solid #999999; border-radius: 0.2em; text-decoration: none;}.pagination a[aria-current="page"] { background-color: #333333; color: white;}Choices made
This pattern is laid out usingflexbox — one flex container nested inside another. The<nav> element is designated a flex container in order that we can center the list inside using thejustify-content property.
The list itself also becomes a flex container to lay the items out as a row. To space the items out we can either use amargin on the flex items or add agap on the flex container.
.pagination { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px;}Accessibility concerns
We want to ensure that a person using a screen reader understands what this navigation does, and where they will go when clicking a link. To help with this we have addedaria-label="pagination" on the<nav> element.
We have also added some additional content that would be read by a screen reader but is hidden visually, and set thearia-hidden attribute on the paging arrows.
The "See Also" section at the end of this document has links to related accessibility topics.