> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Pagination in CMS lists

**For CMS lists and List pages, pagination can be enabled to further enhance their functionality.**

|    |    |    |
| --- | --- | --- |
| [1. Enabling pagination](#2-enabling-pagination) | [2. Pagination options](#2-pagination-options) | [3. Styling pagination buttons](#2-styling-pagination-buttons) |

## Enabling pagination

To enable pagination on a CMS list:

* **Select the CMS List**
* Go to **Right panel - Collection settings**
* **Check** the **Paginated** checkbox

Once pagination is enabled, a container with two buttons will show below your CMS list: previous and next.

![How to enable pagination on a CMS list](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-pagination_q9zcjg.gif)

## Pagination options

Once pagination is enabled there are a few options that you can use to customize the paginated list. These options are:

* **Pagination query** - can be is used to determine the page number shown for the selected list. If it is not unique, all lists that have the same query will show the same page.
* **Preview page** - is used only to preview items on different pages
* **Items/page** - determines the number of list items to be displayed on one page

|| Pagination query can also be bound to props so each component instance with a CMS list can show its own page.

![Pagination options preview](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-pagination_1xc8890.gif)

## Styling pagination buttons

The default styling for the pagination container and buttons can be changed just like any other element in TeleportHQ. To change the styling: 

* **Select the button container or buttons** on the canvas or in the Layers tab under List -> Success -> Pagination
* From the **Right panel** style either of them like any other elements

![How to style the pagination buttons](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-pagination_13579nq.gif)