# Up/Down arrow for navigating pages

**URL:** <https://pdfjs.community/t/up-down-arrow-for-navigating-pages/130>\
**Category:** Technical Support\
**Created:** [July 13, 2020, 7:07am UTC](https://pdfjs.community/t/up-down-arrow-for-navigating-pages/130 "2020-07-13T07:07:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![abhishek11.maurya199](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@abhishek11.maurya199](https://pdfjs.community/u/abhishek11.maurya199)\
**Post date:** [July 13, 2020, 7:07am UTC](https://pdfjs.community/t/up-down-arrow-for-navigating-pages/130/1 "2020-07-13T07:07:35Z")

</div>

Hi,  
Greetings!

Is it possible to have a page navigation arrow in header tools.

If not plz suggest any other option to add tool option  
for navigating page.

Regards  
Abhishek Maurya

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [July 13, 2020, 2:35pm UTC](https://pdfjs.community/t/up-down-arrow-for-navigating-pages/130/2 "2020-07-13T14:35:53Z")

</div>

Hi!

Yes, this is doable by adding custom header buttons to the UI. Documentation can be [found here](https://pdfjs.express/documentation/ui-customization/customizing-header).

You can use the [getCurrentPage](https://pdfjs.express/api/CoreControls.DocumentViewer.html#getCurrentPage__anchor) and [setCurrentPage](https://pdfjs.express/api/CoreControls.DocumentViewer.html#setCurrentPage__anchor) APIs to pick which page to jump to.

It might look something like this:

```javascript
WebViewer(...)
  .then(function(instance) {
    const {docViewer} = instance;
    instance.setHeaderItems(function(header) {
      header.push({
        type: 'actionButton',
        img: '<svg>{svg_down_arrow}</svg>',
        onClick: function() {
             docViewer.setCurrentPage(docViewer.getCurrentPage() + 1)
        }
      });
    });
  });

```

Thanks!  
Logan

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [July 20, 2020, 4:49pm UTC](https://pdfjs.community/t/up-down-arrow-for-navigating-pages/130/3 "2020-07-20T16:49:19Z")

</div>