これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

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

属性

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

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

使用上の注意

<menu> 要素と <ul> 要素はともに順序なしリストの項目を表すものですが、 <ul> は主に項目の表示を目的とするのに対し、 <menu> 要素は操作を行うための対話型の項目を含めるためのものです。

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

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

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

この要素は HTML4 で非推奨になりましたが、 HTML5.1 および HTML living standard で再導入されました。本ドキュメントは、現行の Firefox の実装について説明します。 HTML 5.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;
}

結果

メニューボタンを実装しているブラウザはまだありません。 menu 要素の type 属性は廃止されました。

<menuitem> 要素は廃止されました。

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.2 から変更なし
HTML 5.2
<menu> の定義
勧告 HTML Living Standard のスナップショット、 label および type="context" 属性を削除
HTML 5.1
<menu> の定義
勧告 HTML Living Standard のスナップショット、初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 8IE 未対応 なしOpera 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).
Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Nested menus are not supported.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Menus on <button> element
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
<hr> creates a separator
実験的
Chrome ? Edge 未対応 なしFirefox 完全対応 51IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 51Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
label
実験的
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 8IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Nested menus are not supported.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報