September 02, 2015
This tutorial gives details about how to build a hamburger type menu bar in electron apps similar to slack's menu bar. This type of menu bar declutters the title bar when your application's menu items are rarely used. Basics of ElectronJS. Check this tutorial to get started. Enables or disables the option of the close window by clicking on the corresponding button in the title bar. True: order: string: Set the order of the elements on the title bar. (inverted, first-buttons) null: titleHorizontalAlignment: string: Set horizontal alignment of the window title. (left, center, right) center: menu: Electron.Menu.
Electron is a nice shell for building native apps with web technologies. It doesn’t support all possible window styles on Mac out of the box, and I did a small investigation on how to get different window looks and behaviors working on Mac.
Update: I wrapped the patch in a proper pull request to Electron, which was approved and merged. So now you can set the window styles using the new API on BrowserWindow and don’t have to manually patch anything.
Getting started
To follow along, you need to have Electron building out of source on the Mac. Follow quick start and Mac build instructions. Write up some basic HTML and CSS.
If you build your app with default configuration, you’ll see something like this.
There is a way to get a frameless window with the frame: false configuration option. If you do it, you get this.
No title bar, which is nice. But also, no traffic lights (window controls), which is not nice. We’d still want to let the user control the window with standard controls. While in the past making custom window title bars was not that easy and people would do things like draw their own traffic lights, this ended up looking outdated and ugly on newer OS X versions. (I’m looking at you, Steam…)
Electron Mac Title Bar On Electron For Windows Xp
Going back to native controls
Recent versions of OS X (Yosemite and newer) have updated API-s to still get the default traffic lights while hiding the title bar. If you have the luxury of working on these platforms and don’t need to support older ones, there’s no need for hacks, just use the system API.
Here’s two looks that you can easily accomplish with Electron. I’m not sure if Electron wants to have these as configuration options, and how they should be set to work on other platforms, and all that: I just did a local patch to the code. Here are the two looks and their code patches.
To get a simple hidden title bar like this…
… use this patch:
To get this slightly different look that has the traffic lights inset a bit more…
… use this patch:
In both of these cases, the window dragging behavior remains as the default: the user can grab the (invisible) title bar area and drag the window around. If you want dragging to work with other window parts, take a look at CSS draggable region.
Adds CSS-based Windows 10 Modern UI title bars to any Electron-based desktop app.
Importing the module
Creating a new instance
The module takes a single optional options argument and exports the TitleBar class:
Properties of options:
- (optional) darkMode -
String- Light titlebar buttons (for dark backgrounds) - (optional) color -
String- Icon color (Hex) - (optional) backgroundColor -
String- Bar color (Hex) - (optional) draggable -
Boolean- Titlebar enables dragging of contained window - (optional) fullscreen -
Boolean- Resize button initializes in fullscreen mode
Methods
#appendTo
Shows the Title Bar.
- (optional) contextElement -
HTMLElement- Default:document.body- Element to which to add the titlebar
#destroy
Removes the Title Bar.
Events
TitleBar emits the following events:
minimizemaximizefullscreenclose
Electron Mac Title Bar On Electron For Windows 7
License
MIT © sidneys
Electron Mac Title Bar On Electron For Windows 8.1
Related
Electron Mac Title Bar On Electron For Windows 64-bit
Based on titlebar