This course is out of date and does not reflect our standards or industry best practices.

Check out a free preview of the full Electron Fundamentals, v2 course:
The "Menubar" Lesson is part of the full, Electron Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve introduces the npm menubar module that provides boilerplate for setting up a menu bar application.

Get Unlimited Access Now

Transcript from the "Menubar" Lesson

>> Steve Kinney: Now we have the ability to use native libraries in our application. We use them directly from the renderer process. We don't have to like, okay, we need to put something in the server. We need to put something in the data base. All right, send an atrax call to the server.

[00:00:10] Have the server do it, send an atrax call back. When you use this directly in our application in ways that might not be, I think for a lot of us there is muscle memory to think I can't do that, because I can't do it in the browser, right?

[00:00:22] And one of the big points I wanna kind of drive home by doing this all in the render process, despite my inability to spell, is that we can actually start to think about the stuff in different ways, right? Talking directly to the data base, persistence, maybe sequelized's not the best choice for you, could you still use index db or local storage?

[00:00:41] Yeah, you could, right? But if you do need a sequel database, you can also use that as well. Sequel light tends to be used very commonly in like Mac OS and Windows applications and iOs applications. So it's not totally out of the box, the reason I chose it is because it's used a lot of times in desktop and mobile applications for persisting data, right?

[00:01:03] If there is a browser technology you would rather use go for it, right? But some of the ways that we think about the technology that we can use when building applications is different in electron than it would be normally. For our next check what were gonna do is turn this into an application that lives in either A the menu bar or B the system tray depending on if you are on MacOS or not, right?

[00:01:32] So wherever these icons live on your operating system, that is where we are going to put this application.
>> Steve Kinney: Cool, so let's close the app. There is a really library for doing this called menu bar. Now, electron has a tray module and the tray module is really good for creating like menus like this in the system tray or menu, right?

[00:01:58] Like traditional menus. Right, and remember before we did the from template and then we used that as the application menu. Right, you could put an icon up in the system tray or menu bar and put a menu there. But what you can't do with the built-in electron one is put a user interface there.

[00:02:19] You can put just a dropdown, right? What the menu bar application does is it kinda cheats. Is it puts a menu up there, right, with no items. And when you click it, it perfectly puts a browser window where the menu would be so it looks like there's a menu there, right?

[00:02:38] This basically fakes it. Doing that involves like electron positioner and a whole bunch of libraries. We're not going to use those. We're just going to kind of use menu bar out of the box.
>> Steve Kinney: And it's not gonna be a lot of refactoring. So as that installs, we're gonna get coding.

[00:03:04] So in this case we have, we're creating that main window, we're gonna do stuff a little bit differently this time. We don't need browser window.
>> Steve Kinney: Cuz Menubar's gonna take care of that. We're going to const Menubar.
>> Steve Kinney: We could do import, even. Import menubar from menubar as that installs.

[00:03:30] You gotta love, this is definitely one of the earlier electron libraries and that was back when you could get things like menubar as a MPM package name, right? So you can tell, back in the good old days.
>> Steve Kinney: So we say const menubar = menubar constructor and we're gonna give it that index which is very much like that load url.

[00:03:55] A lot of this is like under the hood stuff for us, so we can say
>> Steve Kinney: Index.jade and we'll give another one called preloadwindow and this is not dissimilar from what we're doing with hiding and showing the window earlier. Basically, in many bar it doesn't even bother to try to create the browser window until the very first time the user clicks on it.

[00:04:31] So its even more obvious the user clicks on it they see Wait. And then we even start to build the browser windows. So in this case even while, before they ever get to it, we will go ahead and load it up. And then we can say, menubar.on('ready, and that's very similar.

[00:04:51] This is an abstraction over browser window, and it's an abstraction over app, it's an abstraction over a lot of the stuff already in electron. It's like you can read the, it's like 100 lines of code or something like that. It's just an easy abstraction for setting this up so you don't have to do it every time.

[00:05:05] So menubar.on('ready, and we'll go ahead.
>> Steve Kinney: And we'll grab
>> Steve Kinney: Our shortcuts from before
>> Steve Kinney: And take them with us. I'm gonna comment out this app on ready
>> Steve Kinney: Cuz we don't want the normal window to open.
>> Steve Kinney: We'll paste those in there. So they start the same way they did before.

[00:05:39] And let's start with that right now.
>> Steve Kinney: There's probably some other code that I should delete about the all Windows and stuff along those lines. But let's give it a shot first. All right, launch number 4 is just starting up. And you can see I have this little cat icon up here, that's just the default one included with the menu bar library cause who doesn't love cats.

[00:06:00] Whosevers opened a computer, saw a cat and been- well the Internets hard if that's the case. And now you see I can click it.
>> Steve Kinney: And there it is, I've got this menu bar application. That was not a hard refactoring. Let's do just one other thing. We can also set a menu, a context menu, which we talked about earlier, on that icon.

[00:06:23] There's no really great way to quit this. I mean, you can click on it into the browser window and hit command q, it'll work. I will tell you, too, that giving yourself some kind of on-off switch is good, because using the developer tools, you have to like click into it, then open the dev tools, then go back and forth.

[00:06:39] So sometimes being in a regular window again, when you're developing a menu bar application, kinda good.