# CollectionViewNavigator

Learn how to add Paging to your Wijmo application using CollectionView Navigator in this documentation topic

## Content

The **CollectionViewNavigator** control can be used in conjunction with the **CollectionView** control to allow users to easily navigate items in the **CollectionView**, either by page or by item.

When creating a **CollectionViewNavigator**, there will be three properties that you will need to set:

* **cv**: Sets the CollectionView that will be tied to the CollectionViewNavigator.
* **byPage**: Boolean property that determines whether the CollectionViewNavigator will allow users to navigate by page or by item.
* **headerFormat**: Sets the text displayed in the CollectionViewNavigator.

## Navigating by Item

To navigate by items in the **CollectionView**, you'll need to tie your **CollectionViewNavigator** to your **CollectionView**, and set the **byPage** property to **false**:

```javascript
let view = new CollectionView(getData(), {});

new CollectionViewNavigator('#cv-nav', {
    cv: view,
    byPage: false,
    headerFormat: 'Item {currentItem:n0} of {itemCount:n0}'
});

new FlexGrid('#cv-grid', {
    itemsSource: view,
    selectionMode: 'RowRange',
    showMarquee: true
})
```

![collectionviewnavigator-by-item](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/collectionviewnavigator-by-item.2774d3.png)

## Navigating by Page

To navigate by pages in the **CollectionView**, you'll need to tie your **CollectionViewNavigator** to your **CollectionView**, and set the **byPage** property to **true**:

```javascript
let view = new CollectionView(getData(), {
    pageSize: 5
});

new CollectionViewNavigator('#cv-page', {
    cv: view,
    byPage: true,
    headerFormat: 'Page {current:n0} of {count:n0}'
});

new FlexGrid('#cv-grid', {
    itemsSource: view,
    selectionMode: 'RowRange',
    showMarquee: true
})
```

![collectionviewnavigator-by-page](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/collectionviewnavigator-by-page.9c6bd4.png)