# How to use api.addHeaderPanel?
**URL:** https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065
**Category:** Development
**Created:** [June 6, 2017, 11:25pm UTC](https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065 "2017-06-06T23:25:06Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@kara-todd](https://meta.discourse.org/u/kara-todd)
#### Post date: [June 6, 2017, 11:25pm UTC](https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065/1 "2017-06-06T23:25:06Z")
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. 🙂
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [June 7, 2017, 5:08pm UTC](https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065/2 "2017-06-07T17:08:18Z")
This is a good question. I see that api was added by @gdpelican – how are you supposed to wire up the state in this case?
---
### Author:  [@kara-todd](https://meta.discourse.org/u/kara-todd)
#### Post date: [June 7, 2017, 7:12pm UTC](https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065/3 "2017-06-07T19:12:33Z")
I managed to work around this now by just introducing a service and by-passing the state management entirely, but I think it would still be good to get some clarifications around how this should properly work. 🙂
The service implementation I have is a bit limited since it can’t really loop back in and update the widget state effectively.
---
### Author:  [@gdpelican](https://meta.discourse.org/u/gdpelican)
#### Post date: [June 9, 2017, 7:40pm UTC](https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065/4 "2017-06-09T19:40:40Z")
I was doing it through an attachWidgetAction call to the header.
```plaintext
api.attachWidgetAction('header', 'toggleMyPanel', function() {
this.state.myPanelVisible = !this.state.myPanelVisible
})
```
You can then trigger that action by bubbling up an action from within the header. In my case I added a header icon that I could click to toggle:
```plaintext
api.decorateWidget('header-icons:before', function(h) {
h.attach('header-dropdown', { action: 'toggleMyPanel' })
})
```
EDIT:
> [@kara-todd](#):
>
> so I can’t nest it in the header Panel
Sorry, I just read this bit. I think the whole point of widget state is that it’s self-contained and doesn’t leak out into other parts of the app, so not sure I have a solid recommendation here. Have you looked into using `Ember.evented`, to emit events that the header can listen to, perhaps?
```plaintext
// reopening the header widget...
this.appEvents = this.container.lookup('app-events:main')
this.appEvents.on('toggleCustomHeader', () => { this.state.customMenu = !this.state.customMenu })
// MEANWHILE, elsewhere:
this.appEvents = this.container.lookup('app-events:main')
this.appEvents.trigger('toggleCustomHeader')
```
The keyboard shortcuts code looks like a decent example of this.
I’d be curious to hear what your solution ends up being, maybe it’s something that the `addHeaderPanel` function should support naturally.