# Javascript HTML - widget

**URL:** https://meta.discourse.org/t/javascript-html-widget/231424
**Category:** Development
**Created:** [June 29, 2022, 7:44am UTC](https://meta.discourse.org/t/javascript-html-widget/231424 "2022-06-29T07:44:48Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Juraj\_Štefánik](https://avatars.discourse-cdn.com/v4/letter/j/d78d45/32.png) [@Juraj\_Štefánik](https://meta.discourse.org/u/Juraj_%C5%A0tef%C3%A1nik)
#### Post date: [June 29, 2022, 7:44am UTC](https://meta.discourse.org/t/javascript-html-widget/231424/1 "2022-06-29T07:44:48Z")

</div>

Hello, if I want to add an ul list to the hamburger menu with from the submenus that I see either on a click or on a hover mouse, should I do it this way or know something more efficient?

I can add individual items to the hamburger menu via a component, but I need to supply sub items there that will be displayed on the hover

Can you advise me? Thanks

```plaintext
<script type="text/discourse-plugin" version="0.1">
  api.decorateWidget('menu-links:before', helper => {
    return helper.h("li", [
    helper.h("a.google", {
        href:"https://google.com",
        title: "Google",
        }, helper.h('p', 'Google')),
    ]);
  });
</script>

```

**EDIT: SOLVED**

\*\*But one more thing, how I add tagert blank? \*\*

---

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [June 29, 2022, 4:32pm UTC](https://meta.discourse.org/t/javascript-html-widget/231424/2 "2022-06-29T16:32:11Z")

</div>

### Return a widget:

What you could do is return your own custom widget to `api.decorateWidget`, which will give you a lot more control in terms of applying attributes, state, actions, etc.

So you could do:

```js
api.decorateWidget('menu-links:before', helper => {
   return helper.widget.attach("custom-menu-links");
});

```

Then inside `javascripts/discourse/widgets/custom-menu-links.js`, create a widget using the createWidget helper:

```js
import { createWidget } from 'discourse/widgets/widget';

createWidget('custom-menu-links', {
...
});

```

Take a look at this topic to learn some of the features of Widgets:

> [@A tour of how the Widget (Virtual DOM) code in Discourse works](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347):
>
> This is out of date. See [Widgets, the Widget API and their roadmap?](https://meta.discourse.org/t/widgets-the-widget-api-and-their-roadmap/292624) The latest builds of Discourse are much faster at rendering topics thanks to our [re-written post stream](https://eviltrout.com/2016/02/25/fixing-android-performance.html). I’ve written up [our new plugin API](https://meta.discourse.org/t/a-new-versioned-api-for-client-side-plugins/40051) but so far haven’t explained how the code all fits together. The purpose of this topic is to allow Discourse developers to understand how the new code works. What’s a Virtual DOM? A Virtual DOM is a data structure that enables browsers to re-render dynamic content very quickly. The techniq…

I used widgets quite a bit in my dropdown header theme component, you might find [some of the code](https://github.com/paviliondev/discourse-dropdown-header) helpful.

### Adding target=“\_blank”

You add it to the attributes object:

```js
      return helper.h('a.google',
        {
          attributes: {
            href: "https://google.com",
            target: "_blank",
            title: "Google"
          },
        }
        ...
      );

```