<menu> HTML 元素在 HTML 规范中被描述为 {{HTMLElement("ul")}} 的语义替代，但浏览器将其视为与 {{HTMLElement("ul")}} 没有区别（并通过无障碍树暴露）。它表示一个无序列表（由 {{HTMLElement("li")}} 元素表示）。

{{InteractiveExample("HTML Demo: <menu>", "tabbed-shorter")}}

```html interactive-example

NASA’s Webb Delivers Deepest Infrared Image of Universe Yet 


    • ```css interactive-example
.news {
  background-color: bisque;
  padding: 1em;
  border: solid thin black;
}

menu {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: 0;
  gap: 1em;
}

    属性

    这个元素只包含全局属性。

    使用说明

    <menu> 和 {{HTMLElement("ul")}} 元素都用于表示无序列表。它们的关键区别在于，{{HTMLElement("ul")}} 主要用于显示内容，而 <menu> 则用于交互式内容。

    [!NOTE] 在早期版本的 HTML 规范中，<menu> 元素还有一个额外的用例，即作为上下文菜单。此功能被认为已过时，并且不在规范中。

    示例

    工具栏

    在这个示例中，使用 <menu> 元素创建了一个编辑应用程序的工具栏。

    HTML

    <menu>
  <li><button onclick="copy()">复制</button></li>
  <li><button onclick="cut()">剪切</button></li>
  <li><button onclick="paste()">粘贴</button></li>
</menu>

    请注意，这在功能上与以下内容没有区别：

    <ul>
  <li><button onclick="copy()">复制</button></li>
  <li><button onclick="cut()">剪切</button></li>
  <li><button onclick="paste()">粘贴</button></li>
</ul>

    CSS

    menu,
ul {
  display: flex;
  list-style: none;
  padding: 0;
  width: 400px;
}

li {
  flex-grow: 1;
}

button {
  width: 100%;
}

    结果

    {{EmbedLiveSample("工具栏", "100%", 100)}}

    技术概要

    内容分类

    流式内容。如果元素的子元素包含至少一个 {{HTMLElement("li")}} 元素：可感知内容。

    允许的内容

    零个或多个 {{HTMLElement("li")}}、{{HTMLElement("script")}} 和 {{HTMLElement("template")}}。

    标签省略 不允许，开始标签和结束标签都不能省略。
    允许的父元素 任何接受流式内容的元素。
    隐含的 ARIA 角色 list
    允许的 ARIA 角色 directory、group、listbox、menu、menubar、none、presentation、radiogroup、tablist、toolbar 或 tree。
    DOM 接口 {{DOMxRef("HTMLMenuElement")}}