View in EnglishAlways switch to English

<menu>：菜单元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

尝试一下

<div>  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>  <menu>    <li><button>Save for later</button></li>    <li><button>Share this news</button></li>  </menu></div>

.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> 和<ul> 元素都用于表示无序列表。它们的关键区别在于，<ul> 主要用于显示内容，而<menu> 则用于交互式内容。

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

示例

工具栏

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

HTML

html

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

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

html

<ul>  <li><button>复制</button></li>  <li><button>剪切</button></li>  <li><button>粘贴</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 角色	`directory`、`group`、`listbox`、`menu`、`menubar`、`none`、`presentation`、`radiogroup`、`tablist`、`toolbar` 或`tree`。
DOM 接口	`HTMLMenuElement`