HTML要素辞書 by Sentaro

<menu>

メニュー要素。リストやアクションのグループ化、またはWeb ComponentsでのカスタムUIに使用されます。

info

概要

<menu> 要素は、リストアイテム（<li>）、またはフローコンテンツを含む、対話的要素のリストをグループ化するために使用されます。
歴史的に、この要素はナビゲーションリンクやユーザーインターフェースのコマンド（ボタンなど）をグループ化する目的で導入されましたが、HTML5.2以降では、主に**コンテキストメニューの定義**（現在非推奨）または**アプリケーション固有のメニュー/ツールバー**のために再定義されました。
現在、単なる項目のリストには <ul> を使用することが多いです。

play_circle

デモ (静的表示)

HTML (Source)

<menu> <li> <button class="button-link">新規作成</button> </li> <li> <a href="#">設定</a> </li> </menu> <br> <p>通常のリストと同じ見た目になります。</p>

Preview (Result)

設定

通常のリストと同じ見た目になります。

list

属性 (Attributes)

属性名	説明
type (非推奨/廃止)	メニューのタイプを指定していました。HTML5.2で廃止されました。以前は `context`（コンテキストメニュー用）などがありました。
label (非推奨/廃止)	メニューの視覚的なラベルを指定していました。 `type="context"` と組み合わせて使用されていましたが、現在は廃止されました。

warning

属性に関する注意
かつて使用されていた type および label 属性は、現在HTMLの仕様では廃止または非推奨とされています。
最新のHTMLでは、<menu> 要素を属性なしで、対話的要素（<button>, <a>, <menuitem>）のリストをグループ化するために使用することが主な用途です。（ただし、多くのブラウザでは <ul> と同様に扱われます。）

code

実用例

1. インタラクティブな操作のグループ化

<menu class="toolbar">
 <li><button>保存</button></li>
 <li><button>印刷</button></li>
</menu>

**用途:** ツールバーやサイドバーなど、機能的な操作をまとめて表示したい場合に、セマンティクスを伝えるために使用できます。

2. Web Componentsでの利用

<!-- Web Componentsの Shadow DOM 内などでのカスタムメニューの定義 -->
<custom-menu>
 <menu>
  <li>アクション 1</li>
  <li>アクション 2</li>
 </menu>
</custom-menu>

lightbulb

知っておくべき重要事項

compare_arrows

<menu> と <ul> の使い分け
機能的な操作（ボタン、コマンドなど）のリストをグループ化する場合に <menu> を使用することが推奨されます。
一方、ナビゲーションリンクや一般的な項目のリスト（目次など）には、従来通り <ul>（非順序リスト）または <ol>（順序付きリスト）を使用するのが最も適切です。

accessibility_new

コンテキストメニューの代替
以前、<menu type="context"> はカスタムの右クリックメニュー（コンテキストメニュー）を作成するために提案されましたが、現在ブラウザでのサポートがなくなり廃止されました。
カスタムメニューを作成する場合は、代わりに **WAI-ARIAのロール**（例: role="menu", role="menuitem"）を <ul> や <div> に付与して実装することが現在のベストプラクティスです。

私について利用規約プライバシーポリシー