From 10e4f9ad373bd29c61f5ed20238a308687e882ff Mon Sep 17 00:00:00 2001
From: Michaela Laurencin <35157522+mlaurencin@users.noreply.github.com>
Date: Fri, 9 May 2025 12:05:26 -0400
Subject: [PATCH] feat: enable secondary label for macOS menu (#46887)

* feat: enable secondary label for macOS menu

* Update shell/browser/ui/cocoa/electron_menu_controller.mm

Co-authored-by: Robo <hop2deep@gmail.com>

* fix for lint

* update docs for sublabel

---------

Co-authored-by: Robo <hop2deep@gmail.com>
---
 docs/api/menu-item.md                         |  2 +-
 docs/api/menu.md                              | 21 +++++++++++++++++++
 .../ui/cocoa/electron_menu_controller.mm      |  9 ++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/docs/api/menu-item.md b/docs/api/menu-item.md
index 0bc80b2bd3..88f84940bd 100644
--- a/docs/api/menu-item.md
+++ b/docs/api/menu-item.md
@@ -19,7 +19,7 @@ See [`Menu`](menu.md) for examples.
   * `type` string (optional) - Can be `normal`, `separator`, `submenu`, `checkbox` or
     `radio`.
   * `label` string (optional)
-  * `sublabel` string (optional)
+  * `sublabel` string (optional) _macOS_ - Available in macOS >= 14.4
   * `toolTip` string (optional) _macOS_ - Hover text for this menu item.
   * `accelerator` [Accelerator](accelerator.md) (optional)
   * `icon` ([NativeImage](native-image.md) | string) (optional)
diff --git a/docs/api/menu.md b/docs/api/menu.md
index fef600f68d..12cd68bb66 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -329,6 +329,27 @@ name, no matter what label you set. To change it, modify your app bundle's
 [About Information Property List Files][AboutInformationPropertyListFiles]
 for more information.
 
+### Menu Sublabels
+
+Menu sublabels, or [subtitles](https://developer.apple.com/documentation/appkit/nsmenuitem/subtitle?language=objc), can be added to menu items using the `sublabel` option. Below is an example based on the renderer example above:
+
+```js @ts-expect-error=[12]
+// main
+ipcMain.on('show-context-menu', (event) => {
+  const template = [
+    {
+      label: 'Menu Item 1',
+      sublabel: 'Subtitle 1',
+      click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
+    },
+    { type: 'separator' },
+    { label: 'Menu Item 2', sublabel: 'Subtitle 2', type: 'checkbox', checked: true }
+  ]
+  const menu = Menu.buildFromTemplate(template)
+  menu.popup({ window: BrowserWindow.fromWebContents(event.sender) })
+})
+```
+
 ## Setting Menu for Specific Browser Window (_Linux_ _Windows_)
 
 The [`setMenu` method][setMenu] of browser windows can set the menu of certain
diff --git a/shell/browser/ui/cocoa/electron_menu_controller.mm b/shell/browser/ui/cocoa/electron_menu_controller.mm
index d23e007dd0..71c9d8b49e 100644
--- a/shell/browser/ui/cocoa/electron_menu_controller.mm
+++ b/shell/browser/ui/cocoa/electron_menu_controller.mm
@@ -315,12 +315,21 @@ NSArray* ConvertSharingItemToNS(const SharingItem& item) {
 - (NSMenuItem*)makeMenuItemForIndex:(NSInteger)index
                           fromModel:(electron::ElectronMenuModel*)model {
   std::u16string label16 = model->GetLabelAt(index);
+  auto rawSecondaryLabel = model->GetSecondaryLabelAt(index);
   NSString* label = l10n_util::FixUpWindowsStyleLabel(label16);
 
   NSMenuItem* item = [[NSMenuItem alloc] initWithTitle:label
                                                 action:@selector(itemSelected:)
                                          keyEquivalent:@""];
 
+  if (!rawSecondaryLabel.empty()) {
+    if (@available(macOS 14.4, *)) {
+      NSString* secondary_label =
+          l10n_util::FixUpWindowsStyleLabel(rawSecondaryLabel);
+      item.subtitle = secondary_label;
+    }
+  }
+
   // If the menu item has an icon, set it.
   ui::ImageModel icon = model->GetIconAt(index);
   if (icon.IsImage())