Integrating the application menu

As you already know, your application is essentially an HTML5 stack running inside Chromium, and Electron provides all necessary integration with the underlying operating system, whether that's macOS, Windows, or Linux.

The concept of application menus is slightly different across platforms. macOS, for instance, provides a single application menu that reflects the active application and displays the corresponding menu items. The Windows system tends to provide a separate menu for each instance of the application window. Finally, Linux systems usually vary based on the window manager's implementations.

Handling every case would be quite cumbersome for developers; that is why the Electron framework provides a unified interface for building application menus from the JSON definition and takes care of integration details.

Let's take a macOS application menu as an example. As soon as you launch your application, Electron provides a set of predefined menu items. For development, one of the most popular menu items is View as it provides access to application reloading and Chrome Developer Tools:

To see the Developer Tools in action, run the application with npm start and click the View | Toggle Developer Tools menu item.

Note that you instantly get access to the whole set of debugging capabilities for the running application. Later on, you are probably going to use this feature a lot during development. In the following screenshot, you can see what the Chrome Developer Tools look like when you've invoked the menu item:

Now, let's see what it takes to create such menus from within application code. We are going to perform the following actions with the system menu component:

• Create a custom menu item
• Define the roles menu item
• Provide menu separators
• Support keyboard accelerators
• Support platform-specific menus

The first thing we need to address is how to create a custom menu item and render it at runtime.