CMS: Adding and Setting Up a Pagination Bar

3 min read
This element is not yet available in Editor X or the Studio Editor. 
Pagination Bars help your visitors navigate between pages of items in your collections and also go to a specific page. Pagination Bars always display the page number of the page your visitor is currently viewing and include back and next buttons. You can configure them in their Settings panel.

See below for information about how pages are calculated. 

Pagination bars can be placed on regular pages and on dynamic list pages. Because dynamic item pages only load one item at a time, they do not need any pagination control. 
Before you begin:
To use this element, you must add CMS to your site and set up a collection to store the results.
Learn how to:

Step 1 | Adding and setting up a pagination bar

  1. Click Add on the left side of the Editor.
  2. Click Interactive.
  3. Click and drag the pagination bar of your choice. 
  4. Click Change Layout
  5. Select one of the following options: 
    • Click
    • Input
    • Arrows
  6. Click the Show First/Last Buttons toggle to show or hide buttons that go to the first and last page of data.
  7. Click the Show First/Last Pages toggle to show or hide the number of the first and last page. The number of the last page is displayed when viewing the first page, and the number of the first page is displayed when viewing the last page. 
  8. Select an option under Alignment:
    • Left
    • Center
    • Right
    • Justified
  9. Select an option under Choose navigation buttons:
    • Arrows
    • Text
      • Customize the text. 
  10. Select an option under Display page numbers from:
    • Left to Right
    • Right to Left

Step 2 | Connecting your pagination bar

  1. Click the pagination bar on your site. 
  2. Click the Connect to CMS icon .
  3. Click Connect a dataset to choose a dataset from the drop-down list.
Once your pagination bar is connected to a dataset, the pagination bar automatically reads the total number of pages from the dataset and also controls which page of data is currently displayed. 
  • You can put more than one pagination bar on your page. For example, you can have one at the top of the page and one at the bottom. As long as they’re both connected to the same dataset, they will both work.
  • If you want to create a regular page that shows one item at a time, you can set the number of items to display to “1” and then use a pagination bar to let your visitors navigate between each of your item

How is the number of pages calculated?

In the dataset settings panel, you specify the number of items to display on a page. The number of available pages is then calculated as the number of items currently in the dataset divided by the number of items on a single page. For example, if you set the number of items to display to 4, and your dataset has 20 items, your Pagination Bar will display 5 pages (20/4 = 5).

Keep in mind that your dataset might not contain all of the items that are currently in your live collection. For example, if you applied a filter on your dataset, it could contain fewer items than in the collection. If you have set up your page to allow your visitors to filter the content, the number of available pages can change based on the filter settings.

Did this help?