# Add custom button to the Menu

**URL:** <https://pdfjs.community/t/add-custom-button-to-the-menu/1093>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [October 22, 2021, 3:22pm UTC](https://pdfjs.community/t/add-custom-button-to-the-menu/1093 "2021-10-22T15:22:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![user5](https://avatars.discourse-cdn.com/v4/letter/u/cab0a1/32.png) [@user5](https://pdfjs.community/u/user5)\
**Post date:** [October 22, 2021, 3:22pm UTC](https://pdfjs.community/t/add-custom-button-to-the-menu/1093/1 "2021-10-22T15:22:24Z")

</div>

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

**PDF.js Express Version**  
8.0.1

**Detailed description of issue**  
Is it possible to add a custom button to the Menu? (the one that has the full-screen, dark mode, and print links)  
We’re only able to add a custom button to the main bar so far.

Thank you.

---

<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:** [October 25, 2021, 3:18pm UTC](https://pdfjs.community/t/add-custom-button-to-the-menu/1093/2 "2021-10-25T15:18:15Z")

</div>

Hey! This code should do the trick:

```javascript
  instance.UI.settingsMenuOverlay.add({
    type: 'actionButton',
    className:"row",
    img: 'IMG_SRC_HERE',
    onClick: () => {
      // action here
    },
    dataElement: 'UNIQUE ID HERE',
    label:'Button Label'
  });

```

- [API](https://pdfjs.express/api/UI.MenuOverlay.html)

If you want to change the order of the items, you can call `getItems`, then rearrange the array how you wish, then pass the new array to `update`

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![user5](https://avatars.discourse-cdn.com/v4/letter/u/cab0a1/32.png) [@user5](https://pdfjs.community/u/user5)\
**Post date:** [October 25, 2021, 6:23pm UTC](https://pdfjs.community/t/add-custom-button-to-the-menu/1093/3 "2021-10-25T18:23:19Z")

</div>

Thanks @Logan it worked, that was exactly what we were looking for.

Thanks again!

---

<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:** [October 29, 2021, 2:28pm UTC](https://pdfjs.community/t/add-custom-button-to-the-menu/1093/4 "2021-10-29T14:28:39Z")

</div>