Supporting keyboard accelerators

Accelerators are strings that can contain multiple modifiers and a single key code, combined by the + character, and are used to define keyboard shortcuts throughout your application.

Traditionally, menu items in applications provide support for keyboard shortcuts. Nowadays, everyone is used to using the Cmd + S or Ctrl + S combinations to save a file, Cmd + P or Ctrl + P to print a document, and so on.

Electron provides support for keyboard shortcuts, or accelerators, that you can use either globally or with a particular menu item. To create a new keyboard shortcut, you need to add a new attribute called accelerator to your menu item and specify the key combination in plain text.

In the previous examples, when you created a menu item separator, we introduced an additional menu item called Reload. This reloads the embedded browser with each click and allows you to see the updated HTML code. The reload role covers this functionality, but the item has no keyboard shortcut by default. Let's fix this by adding an Alt + R shortcut:

1. Edit the menu.js file and add the object, as shown in the following code:

      { 
        role: 'reload',
        accelerator: 'Alt+R'
      }

1. Save the file and restart the application once again.

This time, the Reload menu item has shortcut details listed next to the label. If you are using macOS, for instance, it will be a special Alt symbol, but for Windows and Linux, it may be just the word Alt:

Note that, for many predefined menu roles, the Electron framework provides the most commonly used combinations out of the box.

The next thing we need to address is menus that are specific to a particular platform.