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

HTMLの menuitem 要素 (<menuitem>) は、ユーザがポップアップメニュから実行できるコマンドをあらわします。メニューボタンに割り当てるメニューはもちろん、コンテキストメニューも含みます。

コマンドはテキストのラベルと任意で外観を表すアイコン、あるいは代わりに別の要素で動作を定義するインダイレクトコマンドで明示的に定義できます。また、任意でコマンドにチェックボックスを含めたり、ラジオボタンを共有するグループにすることができます (インダイレクトコマンドのメニュー項目を <input type="checkbox"> および <input type="radio"> 要素に対して定義するとき、チェックボックスまたはラジオボタンを持ちます)。

コンテンツカテゴリー なし。
許可された内容 なし。これは 空要素 です。
タグの省略 開始タグが必須で、終了タグはあってはいけません。
許可された親要素 ポップアップメニュー状態である <menu> 要素。(<menu> 要素の type 属性を指定する場合は popup にしなければなりません。属性がない場合は <menu> の親要素自体がポップアップメニュー状態の <menu> であることが必要です。)
許可された ARIA ロール なし
DOM インターフェイス HTMLMenuItemElement

属性

この要素は グローバル属性 をサポートしています。特に title 属性はコマンドの説明やヒントを出すのに使われます。

checked
コマンドが選択されているか否かを示す論理属性。type 属性が checkbox または radio のときのみ使われます。
command
別の要素の ID を指定して、間接的に実行するコマンドを示します。checkeddisablediconlabelradiogrouptype 属性も含むメニューアイテムで使用してはいけません。
default
この論理属性は、メニューのサブジェクト要素 (buttoninput など) と同じコマンドを使用することを示します。
disabled
現在の状態ではコマンドを使用できないことを示す論理属性です。disabledhidden とは異なりますので注意してください。disabled 属性は、状態の変化によってコマンドが妥当になる状況で適切です。
icon
コマンドを表す画像を提供するために、画像の URL を指定します。
label
ユーザーに表示する、コマンドの名前です。command 属性を提供しない場合は必須です。
radiogroup
この属性は、選択されたときにラジオボタンを切り替えるコマンドのグループの名前を指定します。type 属性が radio である場合に限り使用できます。
type
この属性は、コマンドの種類を以下の 3 つの値のいずれかで示すことができます。
  • command: 関連付けられたアクションを持つ、通常のコマンド。値がない場合の既定値です。
  • checkbox: 2 つの異なる状態を切り替えできるコマンドを表します。
  • radio: ラジオボタンで切り替え可能なコマンドのグループから 1 つを選択します。

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 type="checkbox" onclick="toggleOption()"
    checked="true">Checkbox</menuitem>
  <menuitem type="command" label="Command" icon="icon.png"
    onclick="doSomething()">Checkbox</menuitem>
  <menuitem type="radio" name="group1" onclick="option()"
    checked="true">Radio button 1</menuitem>
  <menuitem type="radio" name="group1"
    onclick="option()">Radio button 2</menuitem>
</menu>

CSS コンテンツ

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

表示結果

仕様

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

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
基本サポート 未サポート[1] 8 (8)[2] 未サポート 未サポート (有)[3] ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 8.0 (8) 未サポート 未サポート 未サポート

[1] 互換性の問題によりサポートしていません。コマンドラインフラグ --enable-blink-features=ContextMenu を伴う場合に限ります。Chromium bug をご覧ください。

[2] contextmenu 属性 で要素に割り当てた <menu> 要素の内部で定義された <menuitems> に限り動作します。さらに、要素の終了タグが必要です。

[3] Enable experimental Web Platform features 設定で制御する形で実装されています。また、type="command" のみサポートします。

関連情報

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

 このページの貢献者: yyss, hamasaki, yuji38kwmt
 最終更新者: yyss,