Closable tab is overriding my context menu


Hi, I’m brand new to Dojo – just started today.

I’m trying to add a context menu to each tab in a TabContainer. This seems easy enough to do (see my example below). The problem is that if I mark a tab as closable then this seems to auto-generate a context menu that overrides mine.

Thus, in the example below, if you right-click on the “Group One” tab, my context menu comes up. Great.
However, if you right-click on the “Group Two” tab then instead what you get is a context menu with exactly one option: “Close”.

How can I either:
1. Replace the auto-generated “Close” menu with the one I want, or
2. Add the MemuItems I want to the auto-generated Menu?

Or is there some other solution? Thanks.

EDIT: Here’s a fiddle:

<html lang="en">
    <meta charset="utf-8">
    <title>Tab Context Menu Issues</title>
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            padding: 0;

        #appLayout {
            height: 100%;
    <link rel="stylesheet" href="//" media="screen">
    <script src="//" data-dojo-config="async: 1"></script>
            "dijit/layout/TabContainer", "dijit/layout/ContentPane",
            "dijit/Menu", "dijit/MenuItem",
            function(registry, TabContainer, ContentPane, Menu, MenuItem){

                // create the TabContainer and attach it to our appLayout div
                var appLayout = new TabContainer({
                    id: "contentTabs",
                    tabPosition: "top",
                    "class": "centerPanel"
                }, "appLayout");

                // Add tabs

                    new ContentPane({
                        title: "Group One",
                        content: "<h4>Group 1 Content</h4>"

                    new ContentPane({
                        title: "Group Two",
                        content: "<h4>Group 2 Content</h4>",
                        closable: true

                // start up and do layout

                // Add context menus.
                var pMenu;
                pMenu = new Menu({
                    targetNodeIds: ["contentTabs"],
                    selector: ".dijitTab"
                pMenu.addChild(new MenuItem({
                    label: "Simple menu item"
                pMenu.addChild(new MenuItem({
                    label: "Disabled menu item",
                    disabled: true

<body class="claro">
<div id="appLayout" class="demoLayout"></div>

(Note: you may have to right-click twice in order to get the context menu to come up. But, one problem at a time…)


Okay, I figured out a way to get ahold of the Menu that’s being auto-generated by the TabController.

The code that generates the menu can be found right at the end of dijit/layout/TabController.js.uncompressed.js in the postCreate method (in vers. 1.14.2 anyway).

There you can see that to get the id of the Menu it just tacks _Menu onto the end of the id of the TabController. The latter’s id in turn is formed by tacking _tablist onto the end of the TabContainer's id.

Therefore the Menu can be accessed with


and from there you can add your own MenuItems or modify the given Menu in whatever way you wish.