MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

非推奨
この機能は Web 標準から削除されました。まだサポートしているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。新旧にかかわらず、プロジェクトでの使用をやめてください。この機能を使用するページ、Web アプリはいつ動かなくなってもおかしくありません。

HTML <menu> 要素は、ユーザーが実行またはアクティブ化可能なコマンドのグループを表します。これはスクリーンの上部にあるリストメニューや、ボタンを押したときにボタンの下部に現れるようなコンテキストメニューを含みます。

コンテンツカテゴリ フローコンテンツ。加えて、リストメニュー状態である場合はパルパブルコンテンツ (親要素がコンテキストメニュー状態の <menu> でない限り、リストメニューはデフォルトの状態です)。
許可された内容 要素がリストメニュー状態である場合: フローコンテンツまたは 0 個以上の <li> 要素、<script> 要素、<template> 要素。
要素がコンテキストメニュー状態である場合: 任意の順序で、0 個以上の <menu> 要素 (context menu状態に限る)、<menuitem> 要素、<hr> 要素、<script> 要素、<template> 要素。
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フローコンテンツを受け入れるすべての要素
許可された ARIA ロール なし
DOM インターフェイス HTMLMenuElement

属性

この要素は他のすべての HTML 要素と同じく、グローバル属性 をサポートします。

label
ユーザーに対して表示する、メニューの名称です。入れ子のメニューで、サブメニューへアクセスできるようにするためにラベルを与えます。親要素がコンテキストメニュー状態の <menu> である場合に限り、必須です。
type
この属性は定義済みのメニューの種類を示すものであり、以下 2 つの値のいずれかを指定します。
  • context: ポップアップメニュー状態であり、他の要素を経由してアクティブになるコマンドのグループを表します。<button> 要素の menu 属性や、contextmenu 属性を持つ要素を経由することが考えられます。<menu> 要素が別の menu 要素の入れ子になっているとき、親要素がすでにこの状態であれば、子要素で値が指定されていない場合のデフォルト値になります。
  • toolbar: ツールバー状態であり、ユーザーと対話するためのコマンドの集合を表します。これは <li> 要素を含む ul 要素のフォームか、子要素として <li> を含まない場合は、コマンドとして利用可能なフローコンテンツです。属性が指定されていない場合のデフォルト値になります。

使用上の注意

<menu> 要素と <ul> 要素はともにビュレット付きのリストアイテムを含めるものですが、<ul> 要素は項目の表示を目的とするのに対し、<menu> 要素は対話型のアイテムを含めるものであるという点が異なります。

HTML メニューは、コンテキストメニュー (一般的に、別の要素を右クリックすると表示される) またはツールバーを作成するために使用できます。

コンテキストメニュー は、「メニューで選択可能な項目を表す <menuitem> 要素」「メニュー内のサブメニューを表す <menu> 要素」「メニューの内容をセクションに分けるセパレーター行を表す <hr> 要素」を包含する <menu> 要素で構成されます。. コンテキストメニューは、関連付ける要素の contextmenu 属性、または ボタンでアクティブにするメニュー であれば <button> 要素の menu 属性を使用して、メニューをアクティブ化する要素に紐づけます。

ツールバーメニュー は、以下のいずれかをコンテンツにした <menu> 要素で構成されます: <li> 要素で表した項目の順不同リスト (それぞれの項目が、ユーザーが利用できるコマンドやオプションを表します)。または、(<li> 要素がない場合) 使用なコマンドやオプションを表す フローコンテンツ

この要素は HTML4 で非推奨になりましたが、HTML5.1 および HTML living standard で再導入されました。本ドキュメントは、現行の Firefox の実装について説明します。HTML5.1 によって、type 属性の 'list' が 'toolbar' に変わりました。

コンテクストメニュー

HTML コンテンツ

<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">
  Right-click to see the adjusted context menu
</div>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr>
  <menuitem>Separated action</menuitem>
</menu>

CSS コンテンツ

div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}

結果

メニューボタンを実装しているブラウザはまだありません。

HTML コンテンツ

<!-- A button, which displays a menu when clicked. -->
<button type="menu" menu="popup-menu">
  Dropdown
</button>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr>
  <menuitem>Separated action</menuitem>
</menu>

結果

ツールバー

ツールバーメニューを実装しているブラウザはまだありません。

HTML コンテンツ

<!-- A context menu for a simple editor,
    containing two menu buttons. -->
<menu type="toolbar">
  <li>
    <button type="menu" menu="file-menu">File</button>
    <menu type="context" id="file-menu">
      <menuitem label="New..." onclick="newFile()">
      <menuitem label="Save..." onclick="saveFile()">
    </menu>
  </li>
  <li>
    <button type="menu" menu="edit-menu">Edit</button>
    <menu type="context" id="edit-menu">
      <menuitem label="Cut..." onclick="cutEdit()">
      <menuitem label="Copy..." onclick="copyEdit()">
      <menuitem label="Paste..." onclick="pasteEdit()">
    </menu>
  </li>
</menu>

結果

仕様

仕様書 策定状況 コメント
HTML Living Standard
<menu> の定義
現行の標準  
HTML 5.1
<menu> の定義
勧告  

ブラウザー実装状況

 

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート 無し 有り8 無し 有り2 無し
Menus on <button> element 無し 無し 無し 無し 無し 無し
<hr> creates a separator ? 無し51 無し ? 無し
label 無し 有り8 無し 有り 無し
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート 無し 無し 有り 有り1 無し 無し ?
Menus on <button> element 無し 無し 無し 無し 無し 無し ?
<hr> creates a separator 無し 無し 無し51 無し 無し ?
label 無し 無し 有り 有り1 無し 無し ?

1. Nested menus are not supported.

2. This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: YuichiNukiyama, yyss, ethertank
 最終更新者: YuichiNukiyama,