CODEWITHSUNDEEP
javascriptelectron
Randall Nickerson
Randall Nickerson

Reputation: 83

Electron menu not showing

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);

Upvotes: 8

Views: 8828

Answers (5)

Kong_Kong
Kong_Kong

Reputation: 111

a solution for you

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

this may make some wrong

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

Upvotes: 11

Fabric
Fabric

Reputation: 1

I've added an empty menu with a role.

const mainMenuTemplate = [
{
  label: "",
  role: 'TODO'
},

{
    label: "File",

    submenu: [
      {
        label: 'Add Item',
      },
      {
      label: 'Clear Items'
      }
    ]
}

];

Upvotes: 0

gian nestor cuello
gian nestor cuello

Reputation: 11

This it to fix the space needed on the nav for macosx

enter code here

//if mac add empty object to menuTemplate
if(process.platform=='darwin'){
  mainMenuTemplate.unshift({});//adding it to the beggining of the array
}

Upvotes: 1

Achim Munene
Achim Munene

Reputation: 536

I noticed that on OS X the first menu item in your menu Template which is 'File' in your case is found under the default Electron Menu hence you might want to add an empty item in your array 

const mainMenuTemplate = [
    {},
    {
        label: 'File',
        submenu: [
            {
                label: 'Add Item'
            },
            {
                label: 'Clear items'
            },
            {
                label: 'Quit',
                click(){
                    app.quit();
                }
            }
        ]
    }
 ];

Upvotes: 2

Jason Sperske
Jason Sperske

Reputation: 30446

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.

Upvotes: 6

Related Questions