Pagination

figma:ready
scss:ready
freemarker:ready
vue:ready

Pagination enables users to navigate from a page to another one, especially when a large content needs to be splitted in several parts. It's mainly used on pages like the search engine result page or the list pages.

Variations

Horizontal navigation

Horizontal pagination gives you the following informations:

  • A visual information to indicate the page where you are (Default version).
  • A button to navigate to the previous page.
  • A button to navigate to the next page.

Default version

There are two mechanics in this case. You can use the arrows to go on previous or next pages, or you can used the select to go on the wanted page.

Compact version

This one can be used when the pagination is a complementary action.

Vertical navigation

Work in progress

We are currently working on a vertical pagination, it will be available soon.