# How to use api.addHeaderPanel?

**URL:** <https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065>\
**Category:** Development\
**Created:** [6. Juni 2017 um 23: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:** 4

<div class="post-metadata">

**Author:** ![gdpelican](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gdpelican/32/81308_2.png) [@gdpelican](https://meta.discourse.org/u/gdpelican)\
**Post date:** [9. Juni 2017 um 19:40 UTC](https://meta.discourse.org/t/how-to-use-api-addheaderpanel/64065/4 "2017-06-09T19:40:40Z")

</div>

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.

---

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