Remove menubar from Electron app

Question

How do I remove this menu-bar from my electron apps:

Also it says "Hello World"(is this because I downloaded electron pre-built, and will go away once I package the application?). I didn't code these into the html, so I don't know how to get it out!-

score 330 · Accepted Answer · edited Sep 03 '21 at 02:41

330

You can use w.setMenu(null) or set frame: false (this also removes buttons for close, minimize and maximize options) on your window. See setMenu() or BrowserWindow(). Also check this thread

Electron now has win.removeMenu() (added in v5.0.0), to remove application menus instead of using win.setMenu(null).

Electron 7.1.x seems to have a bug where win.removeMenu() doesn't work. The only workaround is to use Menu.setApplicationMenu(null), however, this will disable all the menu shortcuts like F11 for toggling fullscreen etc.

In new versions of Electron, you can set autoHideMenuBar: true while creating browserWindow, pressing Alt will show the menu bar again.

const mainWindow = new BrowserWindow({
  autoHideMenuBar: true,
})

edited Sep 03 '21 at 02:41

Wenfang Du

8,804
9
59
90

answered Aug 23 '16 at 03:49

Tony Vincent

13,354
7
49
68

8

fwiw `removeMenu()` is Linux & Windows only – spring Jul 23 '19 at 23:19
1

what about in windows opened by window.open() in an already open window having a menu? – Michael Sep 12 '19 at 04:51
4

Electron 7.1.1 has an issue where `setMenu` and `removeMenu` don't work anymore [link](https://github.com/electron/electron/issues/21088) – P Fuster Nov 14 '19 at 12:03
1

Neither the original or the edit solutions work. This should no longer be the answer. – Tyguy7 Dec 08 '19 at 21:49
3

I just created a new app and tried `win.removeMenu()`. It worked. – ruediste Apr 05 '22 at 06:51

score 105 · Answer 2 · edited Apr 30 '19 at 13:01

105

Use this:

mainWindow = new BrowserWindow({width: 640, height: 360})
mainWindow.setMenuBarVisibility(false)

Reference: https://github.com/electron/electron/issues/1415

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

edited Apr 30 '19 at 13:01

Amir Shabani

3,857
6
30
67

answered Jan 31 '19 at 05:50

iHad 169

1,267
1
10
16

2

I tried `mainWindow.setMenu(null)` with electron 5.0.2 and it did not work fir me as well. Not sure why I see advise to use it everywhere, and was wandering if I am the only one that is doing something incorrectly. Your advice of using `setMenuBarVisibility` ,though removes the visibility of the menu bar, does not remove it completely. It can be brought back by pressing the `Alt` key. – Artium Jun 02 '19 at 18:11
1

FWIW: With Election 6.0.X neither `.setMenu(null)` or `.removeMenu()` worked for me. `.setMenuBarVisibility(false)` removes the menu bar and the `Alt` key only works if `.setAutoHideMenuBar(true)` is run. – Bob Nadler Aug 28 '19 at 20:39
1

+1, in Arch Linux, `setMenu(null)` didn't work, but `setMenuBarVisibility(false)` works as expected (the bar **cannot** be brought back by pressing the `alt` key as @Artium mentioned). – Amir Shabani Sep 14 '19 at 04:54
1

This is the solution that worked for me. The answer that is marked correct does not work on Ubuntu 18.04, Electron v6.0.9 – Chris Sep 18 '19 at 03:36
1

This is the best answer because keyboard shortcuts in the hidden menu will still work. So you can use the default macOS menu with accelerators and everything, and they'll work on Windows without the ugly Windows menu. – somebodysomewhere Aug 13 '20 at 17:45
Currently, only `mainWindow.setMenuBarVisibility(false)` worked on Ubuntu. – Miroslav Glamuzina Oct 19 '20 at 23:10
@AmirA.Shabani even on archlinux setMenu(null) works – Hyperx837 Dec 12 '20 at 11:13

score 42 · Answer 3 · edited Dec 30 '19 at 22:32

42

For Electron 7.1.1, you can use this:

const {app, BrowserWindow, Menu} = require('electron')
Menu.setApplicationMenu(false)

edited Dec 30 '19 at 22:32

sfarbota

2,619
1
22
30

answered Dec 03 '19 at 00:25

Polyvios P

442
4
11

9

Update edit for me: `Menu.setApplicationMenu(null)` worked in `7.1.2` Other solutions did not work for me! – TessavWalstijn Dec 10 '19 at 16:47
1

It also works on 7.1.4. Please update right answer to make sure everyone with this problem will be able to reach the solution. – Emilio Numazaki Dec 11 '19 at 18:48
Works for me in electron 7.1.6 – Iuninefrendor Dec 22 '19 at 03:54
1

Works for me in electron 7.19 This should definitely be updated as the correct answer – Darkrender Jan 16 '20 at 16:16
1

This answer worked for me for Electron v10.1.1. Thanks :) – Maninder Singh Sep 16 '20 at 16:22

Mohamed Allal · Answer 4 · 2020-05-18T23:26:41.283

The menu can be hidden or auto-hidden (like in Slack or VS Code - you can press Alt to show/hide the menu).

Relevant methods:

---- win.setMenu(menu) - Sets the menu as the window’s menu bar, setting it to null will remove the menu bar. (This will remove the menu completly)

mainWindow.setMenu(null)

---- win.setAutoHideMenuBar(hide) - Sets whether the window menu bar should hide itself automatically. Once set the menu bar will only
show when users press the single Alt key.

mainWindow.setAutoHideMenuBar(true)

Source: https://github.com/Automattic/simplenote-electron/issues/293

There is also the method for making a frameless window as shown bellow:

(no close button no anything. Can be what we want (better design))

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()

https://electronjs.org/docs/api/browser-window#winremovemenu-linux-windows

doc: https://electronjs.org/docs/api/frameless-window

Edit: (new)

win.removeMenu() Linux Windows Remove the window's menu bar.

https://electronjs.org/docs/api/browser-window#winremovemenu-linux-windows

Added win.removeMenu() to remove application menus instead of using win.setMenu(null)

That is added from v5 as per:

https://github.com/electron/electron/pull/16570

https://github.com/electron/electron/pull/16657

Electron v7 bug

For Electron 7.1.1 use Menu.setApplicationMenu instead of win.removeMenu()

as per this thread:
https://github.com/electron/electron/issues/16521

And the big note is: you have to call it before creating the BrowserWindow! Or it will not work!

const {app, BrowserWindow, Menu} = require('electron')

Menu.setApplicationMenu(null);

const browserWindow = new BrowserWindow({/*...*/});

UPDATE (Setting autoHideMenuBar on BrowserWindow construction)

As by @kcpr comment! We can set the property and many on the constructor

That's available on the latest stable version of electron by now which is 8.3!
But too in old versions i checked for v1, v2, v3, v4!
It's there in all versions!

As per this link
https://github.com/electron/electron/blob/1-3-x/docs/api/browser-window.md

And for the v8.3
https://github.com/electron/electron/blob/v8.3.0/docs/api/browser-window.md#new-browserwindowoptions

The doc link
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

From the doc for the option:

autoHideMenuBar Boolean (optional) - Auto hide the menu bar unless the Alt key is pressed. Default is false.

Here a snippet to illustrate it:


let browserWindow = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true // <<< here
})

The answer by Edmar below is a better version, latest code for autoHiding the menu — Mister SirCode, Nov 24 '19 at 19:34
In Electron 8.2.5 (I suspect that also in previous versions) it's possible to define, that the menu bar should be auto-hidden in `BrowserWindow` constructor like so: `new BrowserWindow({autoHideMenuBar: true})`. And, by the way, thank You for this answer. It seems to me to be probably the most complete one (assuming that the methods still exist and are not deprecated). — kcpr, May 18 '20 at 18:39
@kcpr Thank you for your answer! I updated the answer to reflect this! — Mohamed Allal, May 18 '20 at 23:12

score 10 · Answer 5 · answered Aug 23 '16 at 06:44

10

When you package your app the default menu won't be there anymore, if this is bugging you during development then you can call setMenu(null) on the browser window as suggested by @TonyVincent.

answered Aug 23 '16 at 06:44

Vadim Macagon

14,463
2
52
45

score 10 · Answer 6 · edited Oct 25 '19 at 05:21

10

As of 7.0.0, most of the above solutions no longer work. BrowserWindow.setMenu() has been replaced by Menu.setApplicationMenu(), which now changes the menu on all windows. setMenu(), removeMenu() no longer do anything, Which by the way are still mentioned in the docs.

setAutoHideMenuBar() still works, but could be a nuisance if you planned to use Alt as a hotkey modifier. Once menu is visible you have to click away from window (loose focus) to hide menu again.

If your application has more than one window, you can't set/remove menus separately on each window. The only way to remove a menu is to use the frameless window approach. That happens to be what I want in my current application, but not a good solution in all cases.

edited Oct 25 '19 at 05:21

Peyman.H

1,819
1
16
26

answered Oct 24 '19 at 20:40

Paul Sorensen

109
1
2

Thank you, this is the only thing that works since 7.0! Is there any mention of this in the docs/changelogs/etc? – rvighne Nov 05 '19 at 02:16
There is an issue open in the github project [link](https://github.com/electron/electron/issues/21088) . Don't know if it was planned deprecation or a bug. – P Fuster Nov 14 '19 at 12:01

Rachuri · Answer 7 · 2019-11-14T15:53:57.137

8

@"electron": "^7.1.1" : 

mainWindow = new browserWindow({ height: 500, width: 800});
//mainWindow.setAutoHideMenuBar(true);
mainWindow.autoHideMenuBar = true;

Working as expected without menu in browser.

edited Nov 14 '19 at 15:53

answered Nov 14 '19 at 15:35

Rachuri

81
1
2

1

(electron) 'setAutoHideMenuBar function' is deprecated and will be removed. Please use 'autoHideMenuBar property' instead. @"electron": "^7.1.1" : mainWindow = new browserWindow({ height: 500, width: 800}); mainWindow.autoHideMenuBar = true; – Rachuri Nov 14 '19 at 15:51

score 8 · Answer 8 · answered Jul 10 '20 at 15:43

These solutions has bug. When use solutions at below, windows has delay at closing.

Menu.setApplicationMenu(null),
&&
const updateErrorWindow = new BrowserWindow({autoHideMenuBar: true});

I used solution at below. This is better for now.

const window= new BrowserWindow({...});
window.setMenuBarVisibility(false);

score 8 · Answer 9 · answered Oct 31 '20 at 09:17

8

set autoHideMenuBar to true while creating the browserWindow

mainWindow = new BrowserWindow({
    autoHideMenuBar: true,
    width: 1200,
    height: 800
})

answered Oct 31 '20 at 09:17

Pranav Asthana

892
1
9
21

score 8 · Answer 10 · answered May 05 '21 at 20:06

8

Electron 12.0.6:

    let mainWindow = new BrowserWindow({
        autoHideMenuBar: true
    });

answered May 05 '21 at 20:06

Vitor França

81
1
1

score 6 · Answer 11 · answered Sep 17 '20 at 11:18

6

2020 Update, the only bl**dy thing that worked for me:

Menu.setApplicationMenu(new Menu());

answered Sep 17 '20 at 11:18

Dan Ochiana

3,340
1
30
28

This is the only answer that works as of 2nd december 2020 – Vishal Dec 01 '20 at 20:43

score 5 · Answer 12 · answered Nov 14 '19 at 20:36

5

Following the answer from this issue, you must call Menu.setApplicationMenu(null) before the window is created

answered Nov 14 '19 at 20:36

Kidoncio

129
3
4

1

Hey, welcome to Stack Overflow! Links to other answers are better suited as comments, rather than answers. This is because you are not actually applying the answer in the linked question to this user's specific scenario. – David Chopin Nov 14 '19 at 20:42

score 5 · Answer 13 · answered Oct 01 '20 at 12:38

setMenu(null); is the best answer, autohidemenu will display on the start of the application


    function createWindow(){
        const win = new BrowserWindow({
            width: 1500,
            height: 800,
            webPreferences:{
                nodeIntergration: true
            }
        });
        win.setMenu(null);
    win.loadFile("index.html");
    }
    app.whenReady().then(createWindow);

score 4 · Answer 14 · edited Jan 03 '19 at 19:30

4

Before this line at main.js:

mainWindow = new BrowserWindow({width: 800, height: 900})

mainWindow.setMenu(null) //this will r menu bar

edited Jan 03 '19 at 19:30

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Jan 03 '19 at 19:06

Edmar Pereira

49
1
2

score 4 · Answer 15 · answered Feb 05 '21 at 11:50

4

Most of the answers here are not valid for newer versions. With the version of 9.0 or upper, Menu.setApplicationMenu(null); should work. By the way, Menu exported from electron package: const {Menu} = require('electron');

answered Feb 05 '21 at 11:50

bekirbakar

166
2
7

score 3 · Answer 16 · answered Dec 19 '19 at 15:03

According to the official documentation @ https://github.com/electron/electron/blob/v8.0.0-beta.1/docs/api/menu.md the proper way to do this now since 7.1.2 and I have tested it on 8.0 as well is to :

const { app, Menu } = require('electron')

Menu.setApplicationMenu(null)

score 2 · Answer 17 · answered May 03 '22 at 15:25

2

Even if autoHideMenuBar: true, you still can toggle menu bar with Alt key.

So to hide it completely, use mainWindow.setMenu(null)

answered May 03 '22 at 15:25

Huy Duy

782
6
11

Remove menubar from Electron app

17 Answers17

Relevant methods:

Edit: (new)

Electron v7 bug

UPDATE (Setting autoHideMenuBar on BrowserWindow construction)

Linked

Related