Remove menubar from Finder in Electron on OSX

Question

I purchased a new macbook and I am now working on getting my apps to run on a 64bit mac.

However I haven't been able to remove the default menubar.

Is there anyway to change my app name from Electron to something else within Electron via app.js so I don't see Electron in Finder (revert to screenshot for better understanding)? Is there any way to remove the edit, view window, and help menus?

screenshot

package.json:

{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron-prebuilt": "^0.33.0"
  }
}

app.js:

var app = require("app"),
        BrowserWindow = require("browser-window");

app.on("ready", function() {
  var mainWindow = new BrowserWindow({
    toolbar: false,
    "skip-taskbar": true,
    "auto-hide-menu-bar": true,
    width: 800,
    height: 600
  });

  mainWindow.loadUrl("file://" + __dirname + "/index.html");
  mainWindow.setMenuBarVisibility(false);
  mainWindow.setAutoHideMenuBar(true);
  mainWindow.openDevTools();
});

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
  </head>
  <body>
    Hello world!
  </body>
</html>

score 9 · Answer 1 · edited May 25 '16 at 07:45

9

After you create your browser window do the following:

mainWindow.setMenu(null);

Only works for Windows and Linux! - http://electron.atom.io/docs/api/browser-window/#winsetmenumenu-linux-windows

Otherwise you can create a custom menu of your own by checking out Electron's documentation on the Menu: http://electron.atom.io/docs/api/menu/.

edited May 25 '16 at 07:45

Michael Schwartz

8,153
14
81
144

answered Sep 18 '15 at 14:43

Shawn Rakowski

5,644
2
27
29

I tried that too and didn't work. I'm assuming it's part of the electron prebuilt I got from npm. I'm gonna install an older version and see if that'll fix the problem – Michael Schwartz Sep 19 '15 at 05:09
Did you try making a custom menu and setting that? – Shawn Rakowski Sep 19 '15 at 13:29
Yeah I followed this tutorial and it didn't initiate, I still got stuck with the default menubar - https://www.youtube.com/watch?v=K-H2amwQ_pU – Michael Schwartz Sep 19 '15 at 22:34
I went back over 10 versions of electron and still had the same problem. So I moved to using node-webkit, which also has 32bit mac support. – Michael Schwartz Sep 24 '15 at 04:53
That menu api you linked is for the contextmenu, not the ribbon bar the top menu ^_^ :) Edit: Nervermind, the example is the second example my bad. – NiCk Newman Nov 15 '15 at 04:45

score 9 · Accepted Answer · edited Oct 09 '18 at 08:20

I got same problem here with my electron app

I tried mainWindow.setMenu(null); but it didn't work

but I noticed that when app is running, there was an electron icon show in the dock which is your app

I think maybe this is the point to cause the problem here

just give it a try

app.dock.hide();

Notice: it's an os x only method (documentation)

there you go

after hide dock icon, you app no longer have default functions of ApplicationMenu or dockMenu, such as Quit, About, Hide etc...

so you can consider about give your app a Tray

score 5 · Answer 3 · answered Sep 20 '15 at 18:14

5

The name Electron is in the Info.plist file inside Electron.app, change it to what you want.

answered Sep 20 '15 at 18:14

Ana Betts

73,868
16
141
209

2

This was very helpful. Due to electron-prebuilt, when I do `electron .` it doesn't change my app name in the first menu entry (bolded on OSX) because that's the app name. Once I package the app it works, so that's good to know. – VladFr Feb 26 '16 at 10:02

Remove menubar from Finder in Electron on OSX

3 Answers3