# How to display a widget in the hamburger menu?
**URL:** https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022
**Category:** Support
**Created:** [October 12, 2020, 9:02pm UTC](https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022 "2020-10-12T21:02:38Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 12, 2020, 9:02pm UTC](https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022/1 "2020-10-12T21:02:38Z")
Hi,
I’d like to display a widget in the hamburger menu. I lookes at [(Deprecated) Display a "Discord Widget" in a dropdown button](https://meta.discourse.org/t/how-to-display-discord-widget-in-a-dropdown-button/73719) to figure it out. but I’m not able to show the button in the hamburger menu.
Here’s my code:
```js
const showModal = require("discourse/lib/show-modal").default;
api.createWidget("modal-button", {
tagName: "a.test",
html() {
return "Open Modal";
},
click() {
showModal("fareharbor");
}
});
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return [helper.attach('modal-button')];
});
```
What am I doing wrong?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [October 12, 2020, 9:12pm UTC](https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022/2 "2020-10-12T21:12:54Z")
From what I can tell, I believe your only issue is `helper.attach()` doesn’t exist.
You should be using `helper.widget.attach()`
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 12, 2020, 9:19pm UTC](https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022/3 "2020-10-12T21:19:48Z")
Thanks for your fast reply!
I tried your suggestion, but it didn’t work either 🤷♂️
I tried to add a simple html element with this:
```js
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return helper.h("div", "test text");
});
```
And it didn’t work 🤔
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [October 12, 2020, 9:41pm UTC](https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022/4 "2020-10-12T21:41:07Z")
Are you doing this from inside `withPluginApi()` ?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 12, 2020, 10:16pm UTC](https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022/5 "2020-10-12T22:16:58Z")
Not that I know. Should I?
This code works, however, as it properly adds the element in the hamburger menu:
```js
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return {href: "", rawLabel: "test"}
});
```
But I don’t know if I can call `showModal("fareharbor");` without using a widget.
And Happy Birthday. 🙂
edit:
Heres’ my full code:
```js
const showModal = require("discourse/lib/show-modal").default;
api.createWidget("modal-button", {
tagName: "a.test",
html() {
return "Open Modal";
},
click() {
showModal("fareharbor");
}
});
// doesn't work
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return [helper.widget.attach('modal-button')];
});
// works
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return {href: "", rawLabel: "test"}
});
```
The `return [helper.widget.attach('modal-button')];` part creates an empty link:
```html
```
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [October 13, 2020, 3:08pm UTC](https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022/6 "2020-10-13T15:08:20Z")
Where does this code live? Are you using the admin custom menu to add this?
Also, can you try adding `console.log(showModal)` inside of the `html() { }` area and see what is logged in your console?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 13, 2020, 7:03pm UTC](https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022/7 "2020-10-13T19:03:15Z")
> [@jordan.vidrine](#):
>
> Are you using the admin custom menu to add this?
Yes, I do.
> [@jordan.vidrine](#):
>
> Also, can you try adding `console.log(showModal)` inside of the `html() { }` area and see what is logged in your console?
Yes, it shows some normal stuff I guess (when I trigger the modal):
`(e,t){t=t||{};var n=(0,c.getOwner)(this),s=n.lookup("route:application"),a=s.controllerFor("modal");a.set("modalClass",t.modalClass||"".concat((0,u.dasherize)(e).toLowerCase(),"-modal"));var i=t.admi…`
But unless I’m misunderstanding something, my issue isn’t the modal interaction (which works), but placing my widget in the hamburger menu.
I followed this [modal creation tutorial](https://meta.discourse.org/t/render-modal-from-theme-client-side-plugin-api/94305/10) and it works perfectly, the custom button shows the modal.
The modal works.
Adding the widget button in a template works and triggers the modal.
Adding a **regular link** in the hamburger menu works.
…But adding the **widget button** in the hamburger doesn’t work and creates an empty link instead. Are there some restrictions of some kind when using decorateWidget with “hamburger-menu”? 🤔
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [October 13, 2020, 8:16pm UTC](https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022/8 "2020-10-13T20:16:00Z")
I’ve passed this on to the appropriate channel and it will be looked at soon. There may be a something preventing this from working properly.
Thanks for bringing this up 😄
---
### Author:  [@JimPas](https://meta.discourse.org/u/JimPas)
#### Post date: [October 13, 2020, 8:18pm UTC](https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022/9 "2020-10-13T20:18:21Z")
Happy birthday, Jordan!
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [October 14, 2020, 5:14pm UTC](https://meta.discourse.org/t/how-to-display-a-widget-in-the-hamburger-menu/167022/11 "2020-10-14T17:14:28Z")
The API was designed with the idea that everything in `generalLinks` would be a `link` widget:
[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js#L189](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js#L189)
So the example above is returning another `Widget` instance, when in fact you need to return one or more javascript object literals like in your working example. Those objects are the arguments to the `link` widget to make the links appear correctly.
It looks like the reason you want to do this is to open a modal. That’s achievable using an `action`. Try this:
```javascript
const showModal = require("discourse/lib/show-modal").default;
api.reopenWidget('hamburger-menu', {
openThing(e) {
showModal('thing-modal');
}
});
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return { action: 'openThing', label: 'open.thing' };
});
```
In this case I attach a new action called `openThing` to the hamburger menu, then trigger that via my link.