Providing menu separators

Let's stop for a moment. Traditionally, in large applications, developers collect menu items into logical groups so that it is much easier for end users to remember and use them.

The following is an example of the File menu from Visual Studio Code, which you are probably using right now to edit project files:

The keyboard shortcuts may differ, depending on the platform you are using, but the structure should be the same with all operating systems.

Note how developers group multiple items into separate areas. If you want to separate two menu items, follow these steps:

1. You can use an extra entry that has the type attribute set to separator. This instructs Electron to render a horizontal line to separate items visually.
2. Update the code for your Debugging menu so that it looks as follows:

      {
          label: 'Debugging',
          submenu: [
            {
              label: 'Dev Tools',
              role: 'toggleDevTools'
            },
      
            { type: 'separator' },
            { role: 'reload' }
          ]
      }

1. Restart the application. Inside the Debugging menu item, you should see two entries: Dev Tools and Reload:

Notice How the horizontal line separates both entries. This is our separator role in action, and you can use as many separators as you like in your menus.

Now, let's learn how Electron handles keyboard shortcuts, also known as accelerators, and key combinations.