系統菜單
Electron建立一個視窗，會預設具備系統菜單，例如：
預設提供了檔案、編輯、視圖、視窗和幫助五個主菜單以及主菜單的子菜單，實際上這些預設的菜單，往往需要我們重新定義。我們在建立視窗的時候，設定frame為false，就是隐藏預設的标題欄和菜單。
如果隻想隐藏菜單呢，就是通過設定autoHideMenuBar：true，但是在使用者打開視窗後，按一下Alt鍵，預設菜單就恢複。在這樣的情況下，我們可以自定義一個系統菜單來覆寫electron預設的菜單。效果如下圖：
定義自己的菜單，需要使用electron内置的Menu子產品，通過Menu.buildFromTemplate方法來建立菜單對象，通過Menu.setApplicationMenu方法來給視窗設定系統菜單。
所設定的菜單對象的label屬性，表示是顯示的文本，可以通過設定click屬性，給對應的菜單添加點選事件。還有一個屬性是role，屬性可選值為paste、undo、redo、cut、copy、delete、selectAll、reload、minimize、close、quit等等。但是設定role後，click屬性就失效了。
HTML右鍵菜單
在web應用中，我們可以在頁面上設定右鍵菜單的功能，大緻思路是：
- 建立的菜單目錄：
<div id="menu">
<div class="menu">1</div>
<div class="menu">2</div>
<div class="menu">3</div>
<div class="menu">4</div>
</div> #menu{
width:125px;
overflow:hidden;
border:1px solid red;
box-shadow:2px 2px 2px #ccc;
position:absolute:
display:none;
}
.menu{
height:20px;
line-height:20px;
text-align:center;
border-bottom:1px solid #ccc;
background:#fff;
} - JavaScript代碼，關聯使用者在頁面上的互動和響應：
window.oncontextmenu = function(e){
e.preventDefault();
var menu = document.querySelector("#menu");
menu.style.left = e.clientX + ‘px’;
menu.style.top = e.clientY + ‘px’;
menu.style.display = "block";
};
window.onclick = function(e){
document.querySelector("#menu").style.display = "none"
} 這樣當我們在頁面上點選滑鼠右鍵的時候，就會觸發window上的oncontextmenu事件，同時擷取到滑鼠的位置，然後在該位置上顯示對應的菜單。
如果使用這樣的方法子Electron應用内建立右鍵菜單，這些菜單隻能顯示在視窗頁面内部，不能懸浮在視窗之上，那麼就會導緻右鍵顯示的菜單，可能隻顯示一部分，出現滾動條。這樣體驗效果并不理想。
系統右鍵菜單
思路是在主程序接收到渲染程序的右鍵點選事件後，Electron視窗内将顯示懸浮在視窗上的系統菜單。例如，先建立菜單對象，還是使用Electron内置的Menu子產品：
// 自定義菜單
let templateMenu = [{
label: "首頁",
submenu: [{ label: "111" }, { label: '9089' }]
}, , {
label: "編輯",
submenu: [{ label: '123' }]
}]
let menu = Menu.buildFromTemplate(templateMenu);
ipcMain.on("contextmenu",()=>{
menu.popup();
}) 渲染程序中監聽右鍵點選事件，并且給主程序發送資訊：
window.oncontextmenu = (e)=>{
e.preventDefault();
ipcRenderer.send("contextmenu")
} 效果圖：
這是electron的菜單内容以及設定右鍵菜單。
托盤圖示
很多應用需要常駐在使用者的作業系統内，但是使用者又不想應用一直顯示在螢幕上，也就是關掉所有的應用視窗，應用程式也一直處于運作狀态，比如微信、qq等等。這樣讓使用者可以随時激活應用。
現在我們在系統托盤上注冊一個圖示，需要使用到Electron内置的Tray子產品，這部分代碼也是比較簡單的，代碼如下：
// 托盤圖示
let iconPath = getAssetPath("./logo.png")
let tray = new Tray(iconPath);
tray.on("click", function () {
mainWindow.show();
}) 效果如圖：
托盤圖示右鍵菜單：
// 托盤菜單
let trayMenu = Menu.buildFromTemplate([{
click() {
mainWindow.show();
},
label: "顯示視窗",
type: "normal"
}, {
click() {
app.quit();
},
label: "退出應用",
type: "normal"
}]);
tray.setContextMenu(trayMenu); // 托盤圖示右鍵