Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long, repetitive listings or content.


Add a .pagination class to a ul to get started, then add list items with links in them.

  • Create arrows by adding an .arrow class to the first and last list items.
  • To mark the current page, add a .current class to a list item.
  • Add a class of .unavailable to a list item to make it not clickable, like for the ellipsis in the middle.


Wrap your ul.pagination with an element that has the .pagination-centered class to center your pagination.

Color Palettes

Pagination can be styles with any of the Sonos palette colors. Examples below.