<menu>: メニュー要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<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, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree
DOM インターフェイス HTMLMenuElement

仕様書

Specification
HTML
# the-menu-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
menu

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報