concept menu bar in category electron

This is an excerpt from Manning's book Electron in Action. Login to get full access to this book.

Figure 1.6. You can create an application that lives in the operating system’s menu bar or system tray.

Unlike traditional web applications, Electron applications aren’t limited to the browser. You can create applications that live in the menu bar or the system tray. See figure 1.6. You can even register global shortcuts to trigger these applications or any of their abilities with a special keystroke from anywhere in the operating system.

Figure 1.6. You can create an application that lives in the operating system’s menu bar or system tray.

macOS and Windows prefer different file types for icons. Their UIs each work better with a different color. By default, the menu bar on macOS is white and works better with dark icons whereas Windows 10 has a dark task bar and works better with white icons. Windows prefers ICO files, and macOS uses PNG files. To solve this issue, Node checks the platform it’s running on and gets the appropriate icon based on the platform. Electron does such a good job of providing a consistent cross-platform experience that this is one of the few times in this book that we find ourselves doing something like this.

This is an excerpt from Manning's book Cross-Platform Desktop Applications: Using Node, Electron, and NW.js. Login to get full access to this book.

Figure 1.9. The Hello World example app running with Electron on OpenSUSE Linux. Notice how the app displays a menu bar with some menu items by default.

Let’s say you have an app that needs a menu bar, with one menu item (File), and for nested menu items, you have the following commands: Say Hello and Quit the App. Figure 9.4 shows the app you want to create.

Figure 9.4. The app you want to build, with the menu in the top left

The Say Hello menu item shows an alert dialog with the message “Hello World” inside it, and the Quit the App menu item closes the app. First, let’s focus on creating the menu bar and implementing the File menu item.

You load NW.js’s GUI library so that you can begin to create the menu. On the following line, you create a menu bar, where menu items will be placed in the app window. You have to do this before you can begin to create any menu items, which is what follows next. On the following line inside the script tag, you initialize the File menu item:

<script>
  'use strict';

  const gui       = require('nw.gui');
  const menuBar   = new gui.Menu({type:'menubar'});
  const fileMenu  = new gui.MenuItem({label: 'File'});
</script>

copy

Now that you’ve initialized all the objects you want to render in the app window, you need to attach the file menu to the menu bar:

<script>
  'use strict';

  const gui       = require('nw.gui');
  const menuBar   = new gui.Menu({type:'menubar'});
  const fileMenu  = new gui.MenuItem({label: 'File'});

  menuBar.append(fileMenu);
</script>

copy

The menu bar has an append function that allows you to add menu items to it, and you use this to add the File menu item. Now, you can attach the menu bar to the app window, like so:

<script>
  'use strict';

  const gui       = require('nw.gui');
  const menuBar   = new gui.Menu({type:'menubar'});
  const fileMenu  = new gui.MenuItem({label: 'File'});

  menuBar.append(fileMenu);
  gui.Window.get().menu = menuBar;
</script>

copy

The gui.Window.get() function call selects the current app window, and calling .menu on it allows you to attach the menu bar to it. You can take a look at the example (make sure that there’s an accompanying package.json manifest file to support loading the example with NW.js) by running nw on the folder in the command line. You should see something like figure 9.5.

Figure 9.5. The app window shows a menu bar at the top with the File menu item.