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

結果

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

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).

関連情報