HTML `<menu>` メニュー要素

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">保存して後で見る</button></li>
    <li><button id="share">このニュースを共有</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()">コピー</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%;
}

結果

技術的概要

コンテンツカテゴリー	フローコンテンツ。この要素の子に 1 個以上の `<li>` 要素がある場合は知覚可能コンテンツ。
許可されている内容	0 個以上の `<li>`, `<script>`, `<template>`。
タグの省略	なし。開始タグと終了タグの両方が必須です。
許可されている親要素	フローコンテンツを受け入れるすべての要素
暗黙の ARIA ロール	`list`
許可されている ARIA ロール	`directory`, `group`, `listbox`, `menu`, `menubar`, `none`, `presentation`, `radiogroup`, `tablist`, `toolbar` or `tree`
DOM インターフェイス	`HTMLMenuElement`