HTML <menu> 元素 呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单,也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。

使用说明:  <menu><ul> 元素都呈现了无序列表元素。最主要的区别是 <ul> 主要是为了展示选项,而 <menu> 则是为了交互。



  • Content categories Flow content. Additionally, if in the list menu state, palpable content. (list menu is the default state, unless the parent element is a <menu> in the context menu state.)
  • Permitted content If the element is in the list menu state: flow content, or alternatively, zero or more occurrences of <li>, <script>, and <template>.
    If the element is in the context menu state: zero or more occurrences, in any order, of <menu> (context menu state only), <menuitem>, <hr>, <script>, and <template>.
  • Tag omission 不允许,开始标签和结束标签都不能省略。
  • Permitted parent elements Any element that accepts flow content.
  • DOM interface HTMLMenuElement


This element includes the global attributes.

The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a <menu> in the context menu state.
This attribute indicates the kind of menu being declared, and can be one of two values.
  • context: The context menu state, which represents a group of commands activated through another element. This might be through the menu attribute of a <button>, or an element with a contextmenu attribute. When nesting <menu> elements directly within one another, this is the missing value default if the parent is already in this state.
  • list: The list menu state, which represents a series of commands for user interaction. This is the missing value default, except where the parent element is a <menu> in the context menu state.


Example 1

<!-- A button, which displays a menu when clicked. -->
<button type="menu" menu="dropdown-menu">
<menu type="context" id="dropdown-menu">
  <menuitem label="Action">
  <menuitem label="Another action">
  <menuitem label="Separated action">


Example 2

<!-- A context menu for a simple editor, containing two menu buttons. -->
    <button type="menu" value="File" menu="file-menu">
    <menu type="context" id="file-menu">
      <menuitem label="New..." onclick="newFile()">
      <menuitem label="Save..." onclick="saveFile()">
    <button type="menu" value="Edit" menu="edit-menu">
    <menu type="context" id="edit-menu">
      <menuitem label="Cut..." onclick="cutEdit()">
      <menuitem label="Copy..." onclick="copyEdit()">
      <menuitem label="Paste..." onclick="pasteEdit()">



Specification Status Comment
WHATWG HTML Living Standard
Living Standard  
Working Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ?[1] ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ?[1] ? ? ?

[1] Gecko has some implementation, though it is not compatible to the specification. See bug 1100749.

See also