Electron menu not showing

Question

Following an electron tutorial and can't get the menus to show up on OS X. Checked that the menu object gets populated with menu items, they just don't appear either in the window or at the top of the screen. Html file loads just fine.

The only menu I see is the (default) app menu that reads Electron, but it has no content when clicked, not even empty lines - just nothing happens on click.

const { app, BrowserWindow, Menu } = require("electron");
const url = require("url");
const path = require("path");

const mainWindowUrl = url.format({
    pathname: path.join(__dirname, "html", "main.html"),
    protocol: "file:",
    slashes: true,
});

const menuTemplate = [
    {
        label: "File",
    },
    {
        label: "Menu1",
    },
    {
        label: "Menu2",
    },
];

const onAppReady = () => {
    const mainWindow = new BrowserWindow({});
    mainWindow.loadURL(mainWindowUrl);

    const menu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(menu);
};

app.on("ready", onAppReady);

Answer 1

a solution for you

if (process.platform == 'darwin') {
    mainMenuTemplate.unshift({label: ''});
}

this may make some wrong

if (process.platform == 'darwin'){
    mainMenuTemplate.unshift({});
}

Answer 2

I think it's just skipping your menus because they lack submenus, here is a modified version of your example that seems to work on my Mac:

const { app, BrowserWindow, Menu } = require("electron");
const url = require("url");
const path = require("path");

const mainWindowUrl = url.format({
    pathname: path.join(__dirname, "html", "main.html"),
    protocol: "file:",
    slashes: true
});
const menuTemplate = [
    {
        label: "File",
        submenu: [{role: 'TODO'}]
    },
    {
        label: "Menu1",
        submenu: [{role: 'TODO'}]
    },
    {
        label: "Menu2",
        submenu: [{role: 'TODO'}]
    }
];

const onAppReady = () => {
    const mainWindow = new BrowserWindow({});
    mainWindow.loadURL(mainWindowUrl);

    const menu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(menu);
};

app.on("ready", onAppReady);

I don't know if it's an OSX specific thing but it appears that at least Electron doesn't like menus that directly trigger roles instead they must reveal submenus that can then trigger some action.