Electron JS：Mac端桌面应用如何用HTML/JS自定义菜单栏？

一、Electron Menu能否用HTML/JS完全自定义 #

原生Electron提供的Mac顶部系统菜单栏受系统UI规范限制，无法通过HTML/JS直接自定义样式，只能通过Electron的Menu API修改菜单项的文字、图标、快捷键、点击事件等基础属性，没法实现自定义背景、圆角、复杂动画这类深度样式定制。

如果要完全掌控菜单栏的视觉和交互，直接在渲染进程（你的React应用）里用HTML/CSS/JS实现自定义导航栏是最优解——就像你现在用<nav>的方式，这种方案不受系统约束，能实现任何你想要的样式和逻辑。

二、实现类似Slack的菜单栏效果 #

Slack在Mac上的菜单栏分两种，对应两种实现方式：

• 顶部系统菜单栏：这部分是符合Mac规范的原生菜单，用Electron Menu API就能轻松实现，你可以添加标准菜单项（文件、编辑、窗口等），也能插入自定义菜单项，和Slack的顶部系统菜单逻辑一致。
• 应用内导航栏：这部分是Slack自己用Web技术实现的，和原生Electron Menu无关。如果你要做这种风格的导航栏，继续用React开发<nav>组件即可，完全能复刻Slack的侧边/顶部导航效果（比如折叠展开、动态切换、自定义交互反馈），Electron渲染进程支持所有Web技术，和普通React项目没有区别。

如果你的需求是替换原生顶部菜单栏为自定义样式：

1. 先在主进程里隐藏原生菜单栏：mainWindow.setMenuBarVisibility(false)
2. 在React应用里开发一个固定在窗口顶部的自定义菜单栏组件，通过ipcRenderer和主进程通信，实现系统级操作（比如退出应用、打开文件）

代码示例 #

主进程隐藏原生菜单栏 #

const { app, BrowserWindow, path } = require('electron');

function createMainWindow() {
  const win = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // 推荐用preload脚本做IPC通信，避免上下文隔离问题
    }
  });

  win.setMenuBarVisibility(false);
  win.loadURL('http://localhost:3000'); // 加载你的React开发服务
}

app.whenReady().then(createMainWindow);

React自定义导航栏组件 #

import React from 'react';
import { ipcRenderer } from 'electron';

const CustomAppMenu = () => {
  const handleQuit = () => {
    ipcRenderer.send('app:quit');
  };

  return (
    <nav className="custom-menu-bar">
      <div className="menu-item">文件</div>
      <div className="menu-item">编辑</div>
      <div className="menu-item" onClick={handleQuit}>退出</div>
    </nav>
  );
};

export default CustomAppMenu;

对应的CSS（可放入React样式文件）：

.custom-menu-bar {
  background-color: #4a154b;
  color: #fff;
  padding: 8px 16px;
  display: flex;
  gap: 20px;
  cursor: pointer;
}

.menu-item:hover {
  text-decoration: underline;
}

主进程处理IPC指令 #

const { ipcMain, app } = require('electron');

ipcMain.on('app:quit', () => {
  app.quit();
});

内容的提问来源于stack exchange，提问作者mikey