We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS




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



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.


实例 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">



<!-- 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
HTML Living Standard
Living Standard  
HTML 5.1


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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.



此页面的贡献者: yuyx91, kgojiwong, pantao, holynewbie
最后编辑者: yuyx91,