# Custom viewControls UI

**URL:** <https://pdfjs.community/t/custom-viewcontrols-ui/1228>\
**Category:** Technical Support\
**Created:** [December 7, 2021, 8:11pm UTC](https://pdfjs.community/t/custom-viewcontrols-ui/1228 "2021-12-07T20:11:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![user38](https://avatars.discourse-cdn.com/v4/letter/u/ba8739/32.png) [@user38](https://pdfjs.community/u/user38)\
**Post date:** [December 7, 2021, 8:11pm UTC](https://pdfjs.community/t/custom-viewcontrols-ui/1228/1 "2021-12-07T20:11:52Z")

</div>

**Which product are you using?**  
PDF.js Express Viewer

\*_PDF.js Express Version_  
8.1

**Detailed description of issue**  
I want to change the UI of the viewControls so that instead of them in the overlay, they would be shown in the actual header itself. Is this possible?

**Expected behaviour**  
This is how they currently look but I would like the overlay to be removed and for specific control buttons such as 'Rotate Clockwise, ‘Double Page’ etc to be in the actual header.

 ![Screen Shot 2021-12-07 at 20.06.04 pm](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/35228f0e4defa7f0c62957b0bf1c36a45e8180b9.png)

**Does your issue happen with every document, or just one?**

**Link to document**

**Code snippet**

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [December 7, 2021, 8:11pm UTC](https://pdfjs.community/t/custom-viewcontrols-ui/1228/3 "2021-12-07T20:11:57Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Customize toolbar in viewer](https://pdfjs.express/documentation/ui-customization/customizing-header.8)
- [Hiding/Showing DOM elements in WebViewer UI - List of elements](https://pdfjs.express/documentation/ui-customization/hiding-elements#list-of-elements)
- [Core engine for WebViewer - Creating your own UI using WebViewer Core](https://pdfjs.express/documentation/ui-customization/core.8#creating-your-own-ui-using-webviewer-core)

APIs:
- [UI.MenuOverlay](https://pdfjs.express/api/UI.MenuOverlay.html#__anchor)
- [UI.PageManipulationOverlay](https://pdfjs.express/api/UI.PageManipulationOverlay.html#__anchor)
- [WebViewerInstance - new WebViewerInstance()](https://pdfjs.express/api/7.0/WebViewerInstance.html#WebViewerInstance__anchor)

Forums:
- [Moving Page Number tool in header](https://pdfjs.community/t/moving-page-number-tool-in-header/131/2)
- [Custom UI event button](https://pdfjs.community/t/custom-ui-event-button/590/2)
- [How to custom thumbnail control button?](https://pdfjs.community/t/how-to-custom-thumbnail-control-button/1202/4)

---

<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:** [December 13, 2021, 8:36pm UTC](https://pdfjs.community/t/custom-viewcontrols-ui/1228/4 "2021-12-13T20:36:28Z")

</div>

Hey there!

Sorry for the delay here.

We don’t have an API to explicitly move those items into the header, but what you can do is hide the buttons from the dropdown menu and recreate them in the headers.

Someone asked a similar question [here](https://community.pdftron.com/t/copy-move-menuoverlay-item-to-main-header-toolbar/4883/2) that you can reference (this is a PDFTron forum however the APIs are the exact same, so everything there is applicable to Express).

Here’s some additional documentation to help you:

- [Removing/hiding items](https://pdfjs.express/documentation/ui-customization/hiding-elements)
- [Customizing the header](https://pdfjs.express/documentation/ui-customization/customizing-header)

Let me know if you need any additional help!

Logan