Windows menu bar hidden

Hide Title Bar/Hide Menu Bar

On Windows, this hides the [Title Bar] and [Menu Bar] from the main window.

On macOS, this hides the [Title Bar] from the editing window.

On Tablet, this hides the [Menu Bar].

Hiding the Title Bar [Windows/macOS]

Select the [Window] menu > [Hide Title Bar] when the Title Bar and Menu Bar are displayed. The Title Bar will be hidden. When the Title Bar is hidden, the window view will be maximized.

Hiding the Menu Bar [Windows/Tablet]

Select the [Window] menu > [Hide Menu Bar] when the Title Bar is hidden and the Menu Bar is displayed. The Menu Bar will be hidden.

Restoring the Title Bar and Menu Bar

On Windows, when the Title Bar and Menu Bar are hidden, hold down the Shift key and press the Tab key. The Title bar and Menu bar will appear.

On macOS, when the [Title Bar] is hidden, hold down the Shift key and press the Tab key. The Title Bar will appear.

Hide menu bar on Windows #457

Comments

mgove131 commented Feb 27, 2017

I confirm (by marking «x» in the [ ] below):

Summary
This application needs a «Hide menu bar» setting to allow a more streamlined interface. Competent users will understand that using the ‘Alt’ key will show the menu bar again.

Steps to reproduce

• Operating System: Windows 10
• Mattermost Desktop App version: 3.6.0
• Mattermost Server version: 3.6.0 (3.6.2)
• Clear steps to reproduce the issue:
  — File > Settings.
  — There is no «Hide menu bar» setting

Expected behavior

• File > Settings.
• There is a «Hide menu bar» setting

Observed behavior

• File > Settings.
• There is no «Hide menu bar» setting

Relevant error messages and/or screenshots

Possible fixes
Add a «Hide menu bar» setting for users to allow them to have a more streamlined UI. Intelligent users are able to handle this option without any issues. The UI shouldn’t be impaired to avoid issues with inept users.

The text was updated successfully, but these errors were encountered:

jasonblais commented Feb 27, 2017

@mgove131 @haboustak This was causing issues where users who had previously hidden the menu bar were unable to perform the actions as they didn’t remember where the menu bar was located.

This particularly caused confusion during early user experience.

We’re considering a design where the menu bar would be placed at the top left corner of the screen similar to attached.

Would that work?

mgove131 commented Feb 27, 2017

@jasonblais Thank you for looking into this! Yes, I think something like that would be great. The main issue is that the menu bar always at the top often stands out and isn’t needed most of the time. Having a button to click that is integrated in the UI should be an adequate solution.

jasonblais commented Feb 28, 2017

Glad to hear! I’ve added a Needs Design label for this issue so the UI can be finalized.

haboustak commented Feb 28, 2017

The implementation you had in v3.5.0 is consistent with the native platform use of menus. In general, that’s my preference. I’d imagine the menu on macOS isn’t as annoying as on Windows. This hamburger menu design will be redundant with the menubar at the top of the screen.

There are probably only a handful of things that are important to the majority of users in the menu. The Settings option comes to mind. I’d consider pulling it out to the top-level using a gear icon. That would then give confused users access to unhide the menu on platforms that support it.

yuya-oc commented Mar 1, 2017

Yeah, I feel a new design is not necessary for macOS. The separated menu bar at top of screen is the common interface in mac apps. Additional menu button might be redundant.

On the other hands, on Linux, the position of menu bar is strongly depending on desktop environments. Recent Unity or GNOME use separated menu bar as well, but there are environments which use a traditional menu bar. So it seems a little hard to determine what is consistent.

mgove131 commented Mar 1, 2017 •

I disagree with the idea that the tool bar always needs to be shown, even to be consistent with other OS applications. The interface is much cleaner without it there, and this worked fine in v3.5.0. At least put a ‘hide/show menu bar’ option in the hamburger menu if you aren’t going to add a new menu bar button.

Again, it’s unfair to punish competent users because some users are unable to understand how a feature works.

yuya-oc commented Mar 1, 2017

On macOS, apps can’t control whether the menu bar appears. It’s one of system preferences.
And «Hide menu bar» have never existed in Mac version of this app due to this reason.

haboustak commented Mar 1, 2017

Making Settings available via icon on the main screen is useful on all platforms and should help users who can’t figure out how to unhide the menu. They’d click settings, and they’d find the option.

I’d restore the hide menu option on Linux, so it can be used with window managers that don’t have a shared menu bar. Your documentation can outline that hiding the menu requires platform support for hiding it.

jasonblais commented Mar 3, 2017 •

@haboustak @mgove131 Completely understand where you’re coming from.

We were getting lots of users being confused how to get to the Settings page (some were even blocked from using the app as they had accidentally entered the wrong URL) as they had auto-hidden the menu bar.

So as a temporary solution, we removed the setting, which was only available on Windows and Linux. We realize this isn’t ideal and isn’t our long-term plan.

What we’re thinking of (and please do share feedback on this) is the hamburger menu design which would replace the menu bar, not be an addition to it.

So it would be roughly as follows:

• hide the menu bar (always and permanently, to all users)
• add the hamburger icon in place of where the Mattermost icon is currently in the window title, for easy access but without hindering the experience for users who don’t need it.

I think this could work for all OS systems, although I’m less familiar with macOS and Linux.

mgove131 commented Mar 3, 2017

@jasonblais It also makes sense to want to improve the feature for everyone. If it was problematic for some users, it is reasonable to fix it. The only frustration for me is that it was implemented by removing the feature without a replacement. It was something I used and it was already implemented. But that frustration is mitigated since you are planning to re-implement it.

For me, the solution your are proposing makes sense. It would work for my use case and I think it wouldn’t be confusing for other users. My main concern is getting the option back, even something like an option in a config file would be adequate for what I personally need. However, cleanly integrating the options into the UI is a good solution.

jasonblais commented Mar 23, 2017

Wondering if you’d have examples of other apps that let you hide the menu bar and how this is accomplished (e.g. through a config option, app setting, integrating in the UI, etc.).

I’m just currently researching other apps to find which pattern might work the best for this project. All help is much appreciated.

mgove131 commented Mar 27, 2017 •

For me, the old method worked fine. If I needed the menu, pressing Alt brings it back. And while it is hidden, it is not a distraction in the interface. If it is problematic for some users, the option should be hidden in a sub-menu or config file.

I don’t have examples from other programs. I do think the screenshot shown earlier is a good, clean solution. My problem is that as is, the menu bar does not feel integrated in the UI and it is distracting.

I believe this was also mentioned, the majority of the options are not needed most of the time. Which is another reason it is nice to have the menu bar hidden.

jasonblais commented Mar 29, 2017 •

Here’s the proposed design (sorry, the screenshots are a bit blurry).

Note the darkened background behind the hamburger menu on the right screenshot, which should occur whenever you hover over the menu with a mouse.

Lastly, the menu bar shouldn’t appear until you actually click on it.

PS: I’m not sure if the black colour for the hamburger menu bar is too dark, but we can try it out first. If it is, we can consider using a grey colour that we use for the plus icon in server tab list (see below for sample)

Remove menubar from Electron app

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!-

15 Answers 15

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)

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

For Electron 7.1.1, you can use this:

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)

—- 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.

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

Edit: (new)

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

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

That is added from v5 as per:

Electron v7 bug

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

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

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!

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:

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.

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.