`<menu>`: The Menu element

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<menu> HTML 元素在 HTML 規範中被描述為 <ul> 的語義替代方案，但瀏覽器（以及透過可訪問性樹暴露）將其與 <ul> 視為無異。它表示一個專案列表（由 <li> 元素表示）。

試一試

<div class="news">
  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
  <menu>
    <li><button id="save">Save for later</button></li>
    <li><button id="share">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;
}

屬性

此元素也接受全域性屬性。

compact 已棄用: 這個布林屬性暗示列表應以緊湊的樣式呈現。對此屬性的解釋取決於瀏覽器。請改用 CSS：要實現與 compact 屬性類似的效果，可以使用 CSS 屬性 line-height 並將其值設定為 80%。

用法說明

<menu> 和 <ul> 元素都表示一個專案列表。關鍵區別在於，<ul> 主要包含用於顯示的條目，而 <menu> 表示一個包含使用者可以執行或啟用的命令的工具欄。

注意： 在 HTML 規範的早期版本中，<menu> 元素還有一個額外的用例，即作為上下文選單。此功能已被認為過時，並且不在規範中。

示例

在此示例中，<menu> 用於為編輯應用程式建立工具欄。

HTML

html

<menu>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</menu>

請注意，這在功能上與

html

<ul>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">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 角色	`directory`、`group`、`listbox`、`menu`、`menubar`、`none`、`presentation`、`radiogroup`、`tablist`、`toolbar` 或 `tree`
DOM 介面	`HTMLMenuElement`