index.md

title	slug	l10n
<menu>: メニュー要素	Web/HTML/Element/menu	sourceCommit 942a529383ee7ee3996fb234187641c08935f3ff

{{HTMLSidebar}}

<menu> は HTML の要素で、HTML 仕様書では {{HTMLElement("ul")}} とは異なる意味づけとして記述されていますが、ブラウザーでは {{HTMLElement("ul")}} と違いのないものとして扱われます（そしてアクセシビリティツリーで公開されます）。これは（{{HTMLElement("li")}} 要素で表現される）項目の順序のないリストを表します。

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

<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;
}

属性

この要素にはグローバル属性があります。

使用上の注意

<menu> 要素と {{HTMLElement("ul")}} 要素はともに順序なしリストの項目を表すものです。主な違いは、{{HTMLElement("ul")}} は主に項目の表示を目的とするのに対し、 <menu> 要素は操作を行うための対話型の項目のためのものです。関連する {{HTMLElement("menuitem")}} 要素は非推奨になりました。

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("Toolbar", "100%", 100)}}

技術的概要

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

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

• 他のリスト関連 HTML 要素: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}