COMPONENT 86 · Actions & Menus

菜单栏

Menubar

也叫Menu Bar应用菜单栏文件编辑视图

把应用命令按类别放入持续可见的菜单入口。

Organize application commands into persistent top-level menus.

ANATOMY & USAGE

结构与使用建议

组成部分

顶层菜单
展开菜单
命令反馈

适合使用

文档编辑器、设计工具等有多组命令的应用。

不建议使用

网站页面导航应使用普通导航链接。

键盘与无障碍

左右方向键切换顶层菜单，上下键移动菜单项，Home/End 跳到首尾。
Escape 关闭并恢复焦点，Tab 退出菜单栏，顶层只保留一个 Tab 停靠点。

参考 WAI-ARIA · Menu and Menubar ↗核对于 2026-09-05

DESCRIBE IT TO AI

这样告诉编程助手

实现菜单栏（Menubar）：把应用命令按类别放入持续可见的菜单入口。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="modern-demo">
      <div role="menubar" aria-label="编辑器菜单" class="modern-menubar">
        <div role="none">
          <button
            id="trigger-0"
            data-menu-trigger
            role="menuitem"
            aria-haspopup="menu"
            aria-expanded="false"
            aria-controls="popup-0"
            tabindex="0"
          >
            文件
          </button>
          <div
            id="popup-0"
            data-menu-popup
            role="menu"
            aria-labelledby="trigger-0"
            hidden
          >
            <button role="menuitem" tabindex="-1">新建画板</button
            ><button role="menuitem" tabindex="-1">保存副本</button>
          </div>
        </div>
        <div role="none">
          <button
            id="trigger-1"
            data-menu-trigger
            role="menuitem"
            aria-haspopup="menu"
            aria-expanded="false"
            aria-controls="popup-1"
            tabindex="-1"
          >
            编辑
          </button>
          <div
            id="popup-1"
            data-menu-popup
            role="menu"
            aria-labelledby="trigger-1"
            hidden
          >
            <button role="menuitem" tabindex="-1">撤销操作</button
            ><button role="menuitem" tabindex="-1">复制图层</button>
          </div>
        </div>
        <div role="none">
          <button
            id="trigger-2"
            data-menu-trigger
            role="menuitem"
            aria-haspopup="menu"
            aria-expanded="false"
            aria-controls="popup-2"
            tabindex="-1"
          >
            视图
          </button>
          <div
            id="popup-2"
            data-menu-popup
            role="menu"
            aria-labelledby="trigger-2"
            hidden
          >
            <button role="menuitem" tabindex="-1">显示网格</button
            ><button role="menuitem" tabindex="-1">适合窗口</button>
          </div>
        </div>
      </div>
      <p id="status" role="status">选择一个编辑命令</p>
    </section>
    <script src="script.js" defer></script>
  </body>
</html>