<menu>

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

コンテンツカテゴリー

フローコンテンツ。この要素の子に 1 個以上の <li> 要素がある場合は知覚可能コンテンツ。

許可されている内容

要素がリストメニュー状態である場合: フローコンテンツまたは 0 個以上の <li>, <script>, <template>。 (リストメニューは、親要素がコンテキストメニュー状態の <menu> でない場合の既定の状態です。)

要素がコンテキストメニュー状態である場合: 任意の順序で、 0 個以上の <menu> (コンテキストメニュー状態に限る), <menuitem>, <hr>, <script>, <template>。

タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素
暗黙の ARIA ロール list
許可されている ARIA ロール directory (en-US), group, listbox, menu (en-US), menubar (en-US), none (en-US), presentation, radiogroup (en-US), tablist (en-US), toolbar, tree (en-US)
DOM インターフェイス HTMLMenuElement (en-US)

属性

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

label

ユーザーに対して表示されるメニューの名称です。入れ子のメニューの中で、サブメニューへアクセスするためのラベルを提供するために使用されます。親要素が <menu> でコンテキストメニュー状態である場合に限り、指定する必要があります。

type

この属性は定義済みのメニューの種類を示すものであり、以下 2 つの値のいずれかを指定します。

  • context : 他の要素を介して起動されるコマンドのグループを表すポップアップメニュー状態を表します。これは <button> 要素の menu 属性で参照されるボタンメニューや、 contextmenu 属性のある要素のコンテキストメニューである可能性があります。この値はこの属性がなく、その親要素も <menu> であった場合の既定値です。
  • toolbar: ツールバー状態であり、ユーザーと対話するための一連のコマンドから成るツールバーを表します。これは <li> の番号なしリストの形か、子要素に <li> を含まない場合は、利用できるコマンドを記述したフローコンテンツです。この値はこの属性が指定されていない場合の既定値です。

使用上の注意

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

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

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

ツールバーメニュー は、 <menu> 要素の中身が 2 通りのうちの一方で記述されたもので構成されます。 <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>

結果

仕様書

Specification
HTML Standard
# the-menu-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報