<menu>: メニュー要素

<menu> は HTML の要素で、HTML 仕様書では <ul> とは異なる意味づけとして記述されていますが、ブラウザーでは <ul> と違いのないものとして扱われます（そしてアクセシビリティツリーで公開されます）。これは（<li> 要素で表現される）項目の順序のないリストを表します。

試してみましょう

属性

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

使用上の注意

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

メモ: HTML 仕様書の初期の版では、<menu> 要素にはコンテキストメニューとしての追加の用途がありました。この機能は廃止されたと考えており、仕様書にはありません。

例

ツールバー

この例では、<menu> を編集アプリケーションのためのツールバーを生成するために使用しています。

HTML

html

<menu>
  <li><button onclick="copy()">コピー</button></li>
  <li><button onclick="cut()">切り取り</button></li>
  <li><button onclick="paste()">貼り付け</button></li>
</menu>

なお、機能的には次のものと違いはありません。

html

<ul>
  <li><button onclick="copy()">コピー</button></li>
  <li><button onclick="cut()">切り取り</button></li>
  <li><button onclick="paste()">貼り付け</button></li>
</ul>

CSS

css

menu,
ul {
  display: flex;
  list-style: none;
  padding: 0;
  width: 400px;
}

li {
  flex-grow: 1;
}

button {
  width: 100%;
}

結果

技術的概要

コンテンツカテゴリー

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

許可されている内容

0 個以上の <li>, <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 or tree (en-US)
DOM インターフェイス HTMLMenuElement

仕様書

Specification
HTML Standard
# the-menu-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報