<menu>: 菜单标签

最后更新：2026-10-13

<menu>菜单标签

表示一组命令或菜单项列表，常用于工具栏或上下文菜单，内部可放 <li> 或 <button> 等交互元素。

<menu>
  <li><button>复制</button></li>
  <li><button>粘贴</button></li>
</menu>

该元素支持全局属性及以下专有属性：

属性	值	描述
`type`		菜单类型：toolbar（工具条，默认）或 context（右键菜单）。
`label`		菜单的可读名称，常用于 context 菜单。

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
<menu>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： menu 与 <ul> 类似但语义是“命令列表”；浏览器对它的渲染支持不一，复杂场景可用 <ul> 替代。

Qmenu 和 nav 有什么区别？

A两者语义相近且历史纠缠：HTML5 最终把 <menu> 定义为「工具栏/命令菜单」，与 <ul> 语义等价。站点导航用 <nav>，应用内工具栏、快捷命令列表可用 <menu>，实际项目里 menu 使用率很低。

Qmenu 可以做右键菜单吗？

A曾经可以——旧规范有 contextmenu 属性 + menu/menuitem 方案，但已被彻底废弃，所有主流浏览器都没有启用。自定义右键菜单目前只能用 JS + 自定义 DOM 实现。

Qmenu 里的条目怎么写？

A与 <ul> 相同：子项是 <li>，命令类菜单每个 li 里放 <button>（最推荐，天然可聚焦可键盘操作）。菜单容器再加 role 与 aria-label 提升无障碍表现。

更多案例即将上线，敬请期待。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。