非推奨
この機能はウェブ標準から削除されました。まだ対応しているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。使用を避け、できれば既存のコードを更新してください。このページの下部にあるブラウザーの対応を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

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

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

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

属性

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

checked
コマンドが選択されているか否かを示す論理属性。type 属性が checkbox または radio のときのみ使われます。
command
別の要素の ID を指定して、間接的に実行するコマンドを示します。 checked, disabled, icon, label, radiogroup, type 属性も含むメニューアイテムで使用してはいけません。
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" checked>Checkbox</menuitem>
  <hr>
  <menuitem type="command" label="This command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png">
    Commands don't render their contents.
  </menuitem>
  <menuitem type="command" label="This command has javascript" onclick="alert('command clicked')">
    Commands don't render their contents.
  </menuitem>
  <hr>
  <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem>
  <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem>
</menu>

CSS コンテンツ

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

表示結果

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
非推奨非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
checked
非推奨非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
command
非推奨非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
default
非推奨非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
disabled
非推奨非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
IE 未対応 なし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 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
icon
非推奨非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
radiogroup
非推奨非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
type
非推奨非標準
Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 8
補足
完全対応 8
補足
補足 Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
補足 The <menuitem> element requires a closing tag.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

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

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