InstantSearch specs

✏️ edit page

Choose a CSS theme:

Pagination

HTML output

<div class="ais-Pagination">
  <nav class="ais-Pagination-navigation" aria-label="Pagination">
    <ul class="ais-Pagination-list">
      <li class="ais-Pagination-item ais-Pagination-item--firstPage ais-Pagination-item--disabled">
        <span class="ais-Pagination-link" aria-label="First Page">‹‹</span>
      </li>
      <li class="ais-Pagination-item ais-Pagination-item--previousPage ais-Pagination-item--disabled">
        <span class="ais-Pagination-link" aria-label="Previous Page">‹</span>
      </li>
      <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
        <span class="ais-Pagination-link" aria-label="Page 1, Current page" aria-current="page">1</span>
      </li>
      <li class="ais-Pagination-item ais-Pagination-item--page">
        <a class="ais-Pagination-link" aria-label="Page 2" href="#">2</a>
      </li>
      <li class="ais-Pagination-item ais-Pagination-item--page">
        <a class="ais-Pagination-link" aria-label="Page 3" href="#">3</a>
      </li>
      <li class="ais-Pagination-item">
        <a class="ais-Pagination-link" aria-label="Page 4" href="#">4</a>
      </li>
      <li class="ais-Pagination-item ais-Pagination-item--nextPage">
        <a class="ais-Pagination-link" aria-label="Next Page" href="#">›</a>
      </li>
      <li class="ais-Pagination-item ais-Pagination-item--lastPage">
        <a class="ais-Pagination-link" aria-label="Last Page, Page 0" href="#">››</a>
      </li>
    </ul>
  <nav>
</div>

CSS classes

Hint: hover classes below to see their position.

name	description
`.ais-Pagination`	the root div of the widget
`.ais-Pagination--noRefinement`	the root div of the widget with no refinement
`.ais-Pagination-list`	the list of all pagination items
`.ais-Pagination-item`	the pagination list item
`.ais-Pagination-item--firstPage`	the "first" pagination list item
`.ais-Pagination-item--lastPage`	the "last" pagination list item
`.ais-Pagination-item--previousPage`	the "previous" pagination list item
`.ais-Pagination-item--nextPage`	the "next" pagination list item
`.ais-Pagination-item--page`	the "page" pagination list item
`.ais-Pagination-item--selected`	the selected pagination list item
`.ais-Pagination-item--disabled`	the disabled pagination list item
`.ais-Pagination-link`	the pagination clickable element

Options

Note: this is a guideline for new InstantSearch flavours, not a rule.

name	default value	description
`totalPages`		Maximum page to allow navigating to
`padding`	`3`	amount of pages to show to the left and right of the current page
`showFirst`	`true`	Whether to show the "first page" control
`showLast`	`true`	Whether to show the "last page" control
`showNext`	`true`	Whether to show the "next page" control
`showPrevious`	`true`	Whether to show the "previous page" control

Translations

Note: this is a guideline for new InstantSearch flavours, not a rule.

name	default value	description
`firstPageItemText`	`"‹‹"`	The text for the first page item.
`previousPageItemText`	`"‹"`	The text for the previous page item.
`nextPageItemText`	`"›"`	The text for the next page item.
`lastPageItemText`	`"››"`	The text for the last page item.
`pageItemText`	`({ currentPage, nbPages }) => String(currentPage)`	The text for the current page item.
`ariaFirstPageLabel`	`"First"`	The label for the first page item (for screen readers).
`ariaPreviousPageLabel`	`"Previous"`	The label for the previous page item (for screen readers).
`ariaNextPageLabel`	`"Next"`	The label for the next page item (for screen readers).
`ariaLastPageLabel`	`"Last"`	The label for the last page item (for screen readers).
`ariaPageLabel`	({ currentPage, nbPages }) => `Page ${currentPage}`	The label for the current page item (for screen readers).