# How to use api.addHeaderPanel?

**URL:** <https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065>\
**Category:** Development\
**Created:** [6월 6, 2017, 11:25오후 UTC](https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065 "2017-06-06T23:25:06Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![kara-todd](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kara-todd/32/73219_2.png) [@kara-todd](https://meta.discourse.org/u/kara-todd)\
**Post date:** [6월 6, 2017, 11:25오후 UTC](https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065/1 "2017-06-06T23:25:06Z")

</div>

I’ve been trying to add an interactive nav icon to our top menu bar.

So far I have:

1. created a widget
2. found the `addHeaderPanel` and called `api.addHeaderPanel('custom-menu-button', 'customMenu')`

However, this is where I get stuck… it looks like (according to the code) the panel will only show if the `header` widget state has `{customMenu: true}` in it… and for the life of me I cannot figure out how to set/override the state…

This panel will ultimately need to toggle it’s own state property (open/closed) to change the icon state, and also to send an action out to render a component with the menu. (unfortunately, it’s full-screen so I can’t nest it in the header Panel)

I had this working with a component pretty quickly, but the new virtual DOM is taking some adjustment mentally. 🙂

---

_[View the full topic](https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065)._