Menus | Electron メインコンテンツへ飛ぶ Electron ドキュメント API ブログ ツール * Electron Forge * Electron Fiddle コミュニティ * ガバナンス * 事例紹介 * リソース リリース 日本語 * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 検索 * はじめよう * Electron のプロセス * ベストプラクティス * サンプル * ダークモード * デバイスアクセス * アプリ内購入 * * キーボード ショート カット * ディープリンク * デスクトップランチャーアクション * * Menus * アプリケーションメニュー * コンテキストメニュー * Dockメニュー * * トレイメニュー * キーボード ショート カット * マルチスレッド * ネイティブなファイルのドラッグ&ドロップ * ナビゲーション履歴 * 通知 * オフスクリーンレンダリング * オンライン/オフライン イベントの検出 * プログレスバー * 最近使用したドキュメント * * * BrowserWindow が表すファイル * * スペルチェッカー * ウェブ埋め込み * タスクバーのカスタマイズ * * ウインドウのカスタマイズ * 開発 * Native Node Modules * 配布方法 * テストとデバッグ * リファレンス * コントリビューション * * サンプル * Menus 目次 Menus Electron's Menu class provides a standardized way to create cross-platform native menus throughout your application. Available menus in Electron ​ The same menu API is used for multiple use cases: * The application menu is the top-level menu for your application. Each app only has a single application menu at a time. * Context menus are triggered by the user when right-clicking on a portion of your app's interface. * The tray menu is a special context menu triggered when right-clicking on your app's Tray instance. * On macOS, the dock menu is a special context menu triggered when right-clicking on your app's icon in the system Dock . To learn more about the various kinds of native menus you can create and how to specify keyboard shortcuts, see the individual guides in this section: 📄️ アプリケーションメニュー Electronアプリのメインアプリケーションメニューをカスタマイズする 📄️ コンテキストメニュー メニュー API を使用してクロスプラットフォームのネイティブ OS メニューを設定します。 📄️ Dockメニュー Configure your app's Dock presence on macOS. 📄️ トレイメニュー システム通知エリアにトレイアイコンを使用した独自メニーを作成します。 📄️ キーボード ショート カット Define accelerator strings for local and global keyboard shortcuts Building menus ​ Each Menu instance is composed of an array of MenuItem objects accessible via the menu.items instance property. Menus can be nested by setting the item.submenu property to another menu. There are two ways to build a menu: either by directly calling menu.append or by using the static Menu.buildFromTemplate helper function. The helper function reduces boilerplate by allowing you to pass a collection of MenuItem constructor options (or instantiated MenuItem instances) in a single array rather than having to append each item in a separate function call. Below is an example of a minimal application menu: * Constructor * Template Helper menu.js const submenu = new Menu ( ) submenu . append ( new MenuItem ( { label : 'Hello' } ) ) submenu . append ( new MenuItem ( { type : 'separator' } ) ) submenu . append ( new MenuItem ( { label : 'Electron' , type : 'checkbox' , checked : true } ) ) const menu = new Menu ( ) menu . append ( new MenuItem ( { label : 'Menu' , submenu } ) ) Menu . setApplicationMenu ( menu ) menu.js const menu = Menu . buildFromTemplate ( [ { label : 'Menu' , submenu : [ { label : 'Hello' } , { type : 'separator' } , { label : 'Electron' , type : 'checkbox' , checked : true } ] } ] ) Menu . setApplicationMenu ( menu ) info All menu items (except for the separator type) must have a label. Labels can either be manually defined using the label property or inherited from the item's role . 型 ​ A menu item's type grants it a particular appearance and functionality. Some types are automatically assigned based on other constructor options: * By default, menu items have the normal type. * Menu items that contain the submenu property will be assigned the submenu type. Other available types, when specified, give special additional properties to the menu item: * checkbox - toggles the checked property whenever the menu item is clicked * radio - toggles the checked property and turns off that property for all adjacent radio items * palette - creates a Palette submenu, which aligns items horizontally (available on macOS 14 and above) * header - creates a section header, which can convey groupings with labels (available on macOS 14 and above) ヒント Adjacent radio items are at the same level of submenu and not divided by a separator. [ { type : 'radio' , label : 'Adjacent 1' } , { type : 'radio' , label : 'Adjacent 2' } , { type : 'separator' } , { type : 'radio' , label : 'Non-adjacent' } // unaffected by the others ] 役割 (roles) ​ Roles give normal type menu items predefined behaviors. We recommend specifying the role attribute for any menu item that matches a standard role rather than trying to manually implement the behavior in a click function. The built-in role behavior will give the best native experience. The label and accelerator values are optional when using a role and will default to appropriate values for each platform. ヒント Role strings are case-insensitive . For example, toggleDevTools , toggledevtools , and TOGGLEDEVTOOLS are all equivalent roles when defining menu items. Edit roles ​ * undo * やり直します * cut * コピー * paste * pasteAndMatchStyle * selectAll * delete Window roles ​ * about - Trigger a native about panel (custom message box on Window, which does not provide its own). * minimize - Minimize current window. * close - Close current window. * quit - Quit the application. * reload - Reload the current window. * forceReload - Reload the current window ignoring the cache. * toggleDevTools - Toggle developer tools in the current window. * togglefullscreen - Toggle full screen mode on the current window. * resetZoom - Reset the focused page's zoom level to the original size. * zoomIn - Zoom in the focused page by 10%. * zoomOut - Zoom out the focused page by 10%. * toggleSpellChecker - Enable/disable built-in spellchecker. Default menu roles ​ * fileMenu - The submenu is a "File" menu (Close / Quit) * editMenu - The submenu is an "Edit" menu (Undo, Copy, etc.) * viewMenu - The submenu is a "View" menu (Reload, Toggle Developer Tools, etc.) * windowMenu - The submenu is a "Window" menu (Minimize, Zoom, etc.) macOS-only roles ​ macOS has a number of platform-specific menu roles available. Many of these map to underlying AppKit APIs. App management roles ​ * hide - Map to the hide action. * hideOthers - Map to the hideOtherApplications action. * unhide - Map to the unhideAllApplications action. * front - Map to the arrangeInFront action. * zoom - Map to the performZoom action. Edit roles ​ * showSubstitutions - Map to the orderFrontSubstitutionsPanel action. * toggleSmartQuotes - Map to the toggleAutomaticQuoteSubstitution action. * toggleSmartDashes - Map to the toggleAutomaticDashSubstitution action. * toggleTextReplacement - Map to the toggleAutomaticTextReplacement action. Speech roles ​ * startSpeaking - Map to the startSpeaking action. * stopSpeaking - Map to the stopSpeaking action. Native tab roles ​ * toggleTabBar - Map to the toggleTabBar action. * selectNextTab - Map to the selectNextTab action. * selectPreviousTab - Map to the selectPreviousTab action. * mergeAllWindows - Map to the mergeAllWindows action. * moveTabToNewWindow - Map to the moveTabToNewWindow action. Default menu roles ​ * appMenu - Whole default "App" menu (About, Services, etc.) * services - The submenu is a "Services" menu. * window - The submenu is a "Window" menu. * help - The submenu is a "Help" menu. Other menu roles ​ * recentDocuments - The submenu is an "Open Recent" menu. * clearRecentDocuments - Map to the clearRecentDocuments action. * shareMenu - The submenu is share menu . The sharingItem property must also be set to indicate the item to share. info When specifying a role on macOS, label and accelerator are the only options that will affect the menu item. ほかのすべてのオプションは無視されます。 Accelerators ​ The accelerator property allows you to define accelerator strings to map menu items to keyboard shortcuts. For more details, see the Keyboard Shortcuts guide. Advanced configuration ​ Programmatic item positioning ​ You can make use of the before , after , beforeGroupContaining , afterGroupContaining and id attributes to control how menu items will be placed when building a menu with Menu.buildFromTemplate . * before - Inserts this item before the item with the specified id. If the referenced item doesn't exist, the item will be inserted at the end of the menu. また、与えられたメニューアイテムをそのアイテムと同じ「グループ」に配置する必要があることを意味します。 * after - Inserts this item after the item with the specified id. If the referenced item doesn't exist, the item will be inserted at the end of the menu. また、与えられたメニューアイテムをそのアイテムと同じ「グループ」に配置する必要があることを意味します。 * beforeGroupContaining - Provides a means for a single context menu to declare the placement of their containing group before the containing group of the item with the specified id. * afterGroupContaining - Provides a means for a single context menu to declare the placement of their containing group after the containing group of the item with the specified id. By default, items will be inserted in the order they exist in the template unless one of the specified positioning keywords is used. サンプル ​ Template: [ { id : '1' , label : 'one' } , { id : '2' , label : 'two' } , { id : '3' , label : 'three' } , { id : '4' , label : 'four' } ] Menu: - one - two - three - four Template: [ { id : '1' , label : 'one' } , { type : 'separator' } , { id : '3' , label : 'three' , beforeGroupContaining : [ '1' ] } , { id : '4' , label : 'four' , afterGroupContaining : [ '2' ] } , { type : 'separator' } , { id : '2' , label : 'two' } ] Menu: - three - four - --- - one - --- - two Template: [ { id : '1' , label : 'one' , after : [ '3' ] } , { id : '2' , label : 'two' , before : [ '1' ] } , { id : '3' , label : 'three' } ] Menu: - --- - three - two - one Icons ​ To add visual aid to your menus, you can use the icon property to assign images to individual MenuItem instances. Adding a little green circle to a menu item const { nativeImage } = require ( 'electron/common' ) const { MenuItem } = require ( 'electron/main' ) const green = nativeImage . createFromDataURL ( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACOSURBVHgBpZLRDYAgEEOrEzgCozCCGzkCbKArOIlugJvgoRAUNcLRpvGH19TkgFQWkqIohhK8UEaKwKcsOg/+WR1vX+AlA74u6q4FqgCOSzwsGHCwbKliAF89Cv89tWmOT4VaVMoVbOBrdQUz+FrD6XItzh4LzYB1HFJ9yrEkZ4l+wvcid9pTssh4UKbPd+4vED2Nd54iAAAAAElFTkSuQmCC' ) const item = new MenuItem ( { label : 'Green Circle' , icon : green } ) Sublabels macOS ​ You can add sublabels (also known as subtitles ) to menu items using the sublabel option on macOS 14.4 and above. Adding descriptions via sublabel const { MenuItem } = require ( 'electron/main' ) const item = new MenuItem ( { label : 'Log Message' , sublabel : 'This will use the console.log utility' , click : ( ) => { console . log ( 'Logging via menu...' ) } } ) Tooltips macOS ​ Tooltips are informational indicators that appear when you hover over a menu item. You can set menu item tooltips on macOS using the toolTip option. Adding additional information via tooltip const { MenuItem } = require ( 'electron/main' ) const item = new MenuItem ( { label : 'Hover Over Me' , toolTip : 'This is additional info that appears on hover' } ) このページを編集 前 デスクトップランチャーアクション 次 アプリケーションメニュー * Available menus in Electron * Building menus * 型 * 役割 (roles) * Edit roles * Window roles * Default menu roles * macOS-only roles * Accelerators * Advanced configuration * Programmatic item positioning * サンプル * Icons * Sublabels macOS * Tooltips macOS ドキュメント * 始めましょう * API リファレンス チェックリスト * パフォーマンス * セキュリティ ツール * Electron Forge * Electron Fiddle コミュニティ * ガバナンス * リソース * Discord * Bluesky * X * Mastodon * Stack Overflow その他 * GitHub * Open Collective * Infrastructure Dashboard Copyright OpenJS Foundation and Electron contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation , please see our Trademark Policy and Trademark List . Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy Hosting and infrastructure graciously provided by