<menu>:菜单元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

尝试一下

属性

这个元素只包含全局属性

使用说明

<menu><ul> 元素都用于表示无序列表。它们的关键区别在于,<ul> 主要用于显示内容,而 <menu> 则用于交互式内容。

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

示例

工具栏

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

HTML

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

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

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

CSS

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

li {
  flex-grow: 1;
}

button {
  width: 100%;
}

结果

技术概要

内容分类

流式内容。如果元素的子元素包含至少一个 <li> 元素:可感知内容

允许的内容

零个或多个 <li><script><template>

标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素。
隐含的 ARIA 角色 list
允许的 ARIA 角色 directorygrouplistboxmenumenubarnonepresentationradiogrouptablisttoolbartree
DOM 接口 HTMLMenuElement

规范

Specification
HTML
# the-menu-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
menu

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见

  • 其他与列表相关的 HTML 元素:<ol><ul><li>