2023-03-29 19:02:13 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<title>Customize Menus</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div>
|
|
|
|
|
<h1>Customize Menus</h1>
|
|
|
|
|
|
|
|
|
|
<h3>
|
|
|
|
|
The <code>Menu</code> and <code>MenuItem</code> modules can be used to
|
|
|
|
|
create custom native menus.
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
There are two kinds of menus: the application (top) menu and context
|
|
|
|
|
(right-click) menu.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
Open the
|
2023-08-10 09:55:52 +00:00
|
|
|
<a href="https://www.electronjs.org/docs/latest/api/menu"
|
2023-03-29 19:02:13 +00:00
|
|
|
>full API documentation<span
|
|
|
|
|
>(opens in new window)</span
|
|
|
|
|
></a
|
|
|
|
|
>
|
|
|
|
|
in your browser.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<h2>Create an application menu</h2>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<p>
|
|
|
|
|
The <code>Menu</code> and <code>MenuItem</code> modules allow you to
|
|
|
|
|
customize your application menu. If you don't set any menu, Electron
|
|
|
|
|
will generate a minimal menu for your app by default.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
If you click the 'View' option in the application menu and then the
|
|
|
|
|
'App Menu Demo', you'll see an information box displayed.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<h2>ProTip</h2>
|
|
|
|
|
<strong>Know operating system menu differences.</strong>
|
|
|
|
|
<p>
|
|
|
|
|
When designing an app for multiple operating systems it's
|
|
|
|
|
important to be mindful of the ways application menu conventions
|
|
|
|
|
differ on each operating system.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
For instance, on Windows, accelerators are set with an
|
|
|
|
|
<code>&</code>. Naming conventions also vary, like between
|
|
|
|
|
"Settings" or "Preferences". Below are resources for learning
|
|
|
|
|
operating system specific standards.
|
|
|
|
|
</p>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
<a
|
2023-08-10 09:55:52 +00:00
|
|
|
href="https://developer.apple.com/design/human-interface-guidelines/the-menu-bar"
|
2023-03-29 19:02:13 +00:00
|
|
|
>macOS<span
|
|
|
|
|
>(opens in new window)</span
|
|
|
|
|
></a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a
|
2023-08-10 09:55:52 +00:00
|
|
|
href="https://learn.microsoft.com/en-us/windows/apps/design/controls/menus-and-context-menus"
|
2023-03-29 19:02:13 +00:00
|
|
|
>Windows<span
|
|
|
|
|
>(opens in new window)</span
|
|
|
|
|
></a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a
|
2023-08-10 09:55:52 +00:00
|
|
|
href="https://developer.gnome.org/hig/patterns/controls/menus.html"
|
2023-03-29 19:02:13 +00:00
|
|
|
>Linux<span
|
|
|
|
|
>(opens in new window)</span
|
|
|
|
|
></a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<h2>Create a context menu</h2>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<button id="context-menu">View Demo</button>
|
|
|
|
|
</div>
|
|
|
|
|
<p>
|
|
|
|
|
A context, or right-click, menu can be created with the
|
|
|
|
|
<code>Menu</code> and <code>MenuItem</code> modules as well. You can
|
|
|
|
|
right-click anywhere in this app or click the demo button to see an
|
|
|
|
|
example context menu.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
In this demo we use the <code>ipcRenderer</code> module to show the
|
|
|
|
|
context menu when explicitly calling it from the renderer process.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
See the full
|
|
|
|
|
<a
|
2023-08-10 09:55:52 +00:00
|
|
|
href="https://www.electronjs.org/docs/latest/api/web-contents/#event-context-menu"
|
2023-03-29 19:02:13 +00:00
|
|
|
>context-menu event documentation</a
|
|
|
|
|
>
|
|
|
|
|
for all the available properties.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// You can also require other files to run in this process
|
|
|
|
|
require("./renderer.js");
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
