Electron gives you a pretty comprehensive set of menus that have most of the necessarily functionality for a normal app. However, ocassionally, you may wan to create or control your menu options.
Now once you're done with your template, you call the setApplicationMenu function which replaces the default menu with your generated menu. Now in order to manage the template, we have some additional options. For example, there are instances where you need to specify platform-specific options or perhaps use a different command or control key depending on the operating system. When you want to use one of React's predefined menus, you simply give a menu item a role and nothing else and then you don't have to worry about the functionality.
No label, command key, or any script for functionality is necessary. If you want to, you can also define a custom name with the label option. The accelerator option lets you control what command keys will trigger an action. Finally, the type allows you to generate either separators to separate menu items or create menu items that have a checkbox. So let's take a look at how that works by building a super simple menu. Now I've got my main.js file open, and the first thing I need to do is create some variables.
So I'm going to create a variable that's going to hold the menu object from the Electron library. Then I'm going to create a placeholder for myAppMenu that's going to hold our template. Let's go ahead and add an item called menuTemplate up here to my variables. And then I'll come down here. I'll use menuTemplate to build my menu. So this is going to be an array of menu items.
So say, for example, that you wanted to create an edit menu. You create the menu by using an object. And then if you want to specify a label for the menu, you can use the label option and then give it a name. So this will be our edit menu. If you want to create a submenu, you just specify that as an item here and then this will have an array of additional elements. So let's say that I wanted to use something that the system is going to give me like, for example, the undo command.
So all I need to do to create an undo command is just type in role and specify undo as the text. I don't have to type in what the label should be or what the functionality should be. Electron is going to take care of that for me automatically. So you would do the same thing for other submenu items here. Let's just copy a few of these. And so, the standard ones would be undo, redo, cut, copy, and paste.
And it might be useful to have select all on here as well, selectall. And that's pretty much all you have to do to build some default items. Just specify the role and then the keyword for the element that you want to generate automatically. Now if I want to create another menu item, so let's say that I wanted to create the application menu, I'm going to start just like I did with the edit menu by creating a label for the top of the menu. So this one will have a label of Wisdom Pet.
Now, you're going to notice that when I preview my application the label is not going to show up. It's not going to show up until I package my application. On some Windows machine, that may be different. But on a Mac, it doesn't replace a default Electron name until we package this. So underneath this label, I'm going to create a submenu and that's going to be an array of items. And now I can type my elements. For example, if I wanted to have a quit item, all I need to do again is just put in a role of quit.
And perhaps I'm going to use also a close. So that's another default. Let's say that I wanted to add a menu that displayed help in the form of my personal website. So what I'll do here then is create a role and give it a role of help. And then I'm going to add some additional elements here. So help, and then it's going to have a label that's different than the default. So it'll say Our Website. And then the final element can be a click handler.
So we can just say click(). And when somebody clicks on this item, here we will use the electron.shell command. The electron.shell allows you to send information to your operating system. And in this case, what we want to do is ask the operating system to open an external file. And we'll just specify a URL here. Alright, so we have our menu built. Let's go ahead and delete this extra space. And we've got a couple of menu items in here.
Maybe I'll put this one on the previous line just to make things a little bit cleaner. And we've got both the menu template as well as a variable at the very top called myAppMenu. So I'm going to tell myAppMenu to use the menu object from Electron and the buildFromTemplate option and use our template that we created.
And then we'll use again that menu object to set the application menu to our menu that we just generated here, myAppMenu. Alright, so that should be it. Let's go ahead and save this. So there's a lot of options for creating menus. You can check Electron's documentation for more information, especially about what these different roles should be. You're not going to know them without looking these up. If you go to this page in the Electron documentation, you can look up some of the defaults.
It has a more comprehensive set of menus that is similar to what you had when you didn't specify custom menu. For example, here's how you can create a menu for only a specific operating system. In this case, darwin is equivalent to Mac OS.
- Creating your first app
- Configuring multiple windows and window events
- Integrating React.js
- Creating external components
- Passing events through props
- Saving data
- Using Bootstrap components in Electron
- Creating a multipanel app
- Creating custom menus
- Packaging the application