# RED.menu API and small update in addItem

**URL:** <https://discourse.nodered.org/t/red-menu-api-and-small-update-in-additem/16416>\
**Category:** Core Development\
**Created:** [7 October 2019 09:05 UTC](https://discourse.nodered.org/t/red-menu-api-and-small-update-in-additem/16416 "2019-10-07T09:05:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thierry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thierry/32/8654_2.png) [@Thierry](https://discourse.nodered.org/u/Thierry)\
**Post date:** [7 October 2019 09:05 UTC](https://discourse.nodered.org/t/red-menu-api-and-small-update-in-additem/16416/1 "2019-10-07T09:05:33Z")

</div>

Hi All,

I am using editorTheme.page.scripts from the setting.js to customize the editor.  
I made some basic customization such as adding a button next to the "deploy" button, and some entries in hamburger menu for my own application needs. It is working pretty fine, but I am not completely satisfied in the way I have added the menu entries.  
To do so I have inserted the html elements with the appropriate node-red classes, like so :

```auto
    const ul = document.querySelector("#red-ui-header>ul.red-ui-header-toolbar");
    const myItems = String.raw`
    <li class="red-ui-menu-divider"></li>
    <li>
      <a tabindex="-1" href="#">
        <div id="menu-about" class="red-ui-menu-label">About ${about.productName}</div>
      </a>
    </li>
    <li class="red-ui-menu-dropdown-submenu pull-left">
      <a tabindex="-1" href="#">
        <span class="red-ui-menu-label">Help</span>
      </a>
      <ul class="red-ui-menu-dropdown">
      <li>
        <a id="menu-get-started" tabindex="-1" href="#">
          <span class="red-ui-menu-label">Getting started</span>
        </a>
      </li>
      <li>
        <a id="menu-wiki" tabindex="-1" href="#">
          <span class="red-ui-menu-label">Wiki</span>
        </a>
      </li>
      </ul>
    </li>
    `;
    hamburger.insertAdjacentHTML('beforeend', myItems.trim());

```

As already said, it is working fine, but I find it very hard coded and it is directly relying on node-red classes.  
Then I tried to use instead the RED.menu.addItem api which is available in this context, like so:

```auto
var menuOptions = [];
    menuOptions.push({ id: "menu-item-help-myapp-gettingstart", label: "Getting Started", onselect: function () { $("#getting-started-dialog").dialog("open"); } });
    menuOptions.push({ id: "menu-item-help-myapp-wiki", label: "Wiki", onselect: function () { $("#wiki-dialog").dialog("open"); } });

    RED.menu.addItem("red-ui-header-button-sidemenu", { id: "menu-item-myapp-help", label: "Help", options: menuOptions });
    RED.menu.addItem("red-ui-header-button-sidemenu", { id: "menu-item-myapp-about", label: "About " + about.productName, onselect: function () { $("#about-dialog").dialog("open"); } });

```

Again it is working pretty fine, however I face an issue to insert a divider as It seems not possible with current implementation of "RED.menu.addItem" function.  
Nevertheless, with a simple modification in addItem, a divider can be inserted by using

```auto
RED.menu.addItem("red-ui-header-button-sidemenu", null);

```

Below is the small modification in addItem :

```auto
   function addItem(id,opt) {
        var item = createMenuItem(opt);
        // small modification just below, testing "opt!== null" before "opt.group"
        if (opt !== null && opt.group) {
            var groupItems = $("#"+id+"-submenu").children(".red-ui-menu-group-"+opt.group);
            if (groupItems.length === 0) {
                item.appendTo("#"+id+"-submenu");
            } else {
                for (var i=0;i<groupItems.length;i++) {
                    var groupItem = groupItems[i];
                    var label = $(groupItem).find(".red-ui-menu-label").html();
                    if (opt.label < label) {
                        $(groupItem).before(item);
                        break;
                    }
                }
                if (i === groupItems.length) {
                    item.appendTo("#"+id+"-submenu");
                }
            }
        } else {
            item.appendTo("#"+id+"-submenu");
        }
    }

```

Then my question is, may I submit a PR to get this small modification in node-red ?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [7 October 2019 09:35 UTC](https://discourse.nodered.org/t/red-menu-api-and-small-update-in-additem/16416/2 "2019-10-07T09:35:01Z")

</div>

Seems a reasonable suggestion.

Put in a PR and we can review the specifics there.

---

<div class="post-metadata">

**Author:** ![Thierry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thierry/32/8654_2.png) [@Thierry](https://discourse.nodered.org/u/Thierry)\
**Post date:** [7 October 2019 13:13 UTC](https://discourse.nodered.org/t/red-menu-api-and-small-update-in-additem/16416/3 "2019-10-07T13:13:55Z")

</div>

done:

> <https://github.com/node-red/node-red/pull/2314>