`<menu>` Элемент меню HTML

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Элемент <menu> HTML описан в спецификации HTML как семантическая альтернатива элементу <ul>, но браузеры обрабатывают его (и отображают в дереве доступности) так же, как и <ul>. Он представляет собой неупорядоченный список элементов (представленных элементами <li>).

Попробуйте

<div class="news">
  <a href="#">NASA's Webb Delivers Deepest Infrared Image of Universe Yet</a>
  <menu>
    <li><button id="save">Save for later</button></li>
    <li><button id="share">Share this news</button></li>
  </menu>
</div>

.news {
  background-color: bisque;
  padding: 1em;
  border: solid thin black;
}

menu {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: 0;
  gap: 1em;
}

Атрибуты

Этот элемент также поддерживает глобальные атрибуты.

compact: Этот логический атрибут указывает, что список следует отображать в компактном виде. Интерпретация этого атрибута зависит от браузера. Вместо него используйте CSS: для достижения эффекта, похожего на атрибут compact, можно задать свойству CSS line-height значение 80%.

Примечания по использованию

Элементы <menu> и <ul> представляют собой неупорядоченный список элементов. Главное различие заключается в том, что <ul> обычно содержит элементы для отображения, а <menu> представляет панель инструментов с командами, которые пользователь может выполнять или активировать.

Примечание: В ранних версиях спецификации HTML элемент <menu> также использовался для создания контекстного меню. Эта функциональность считается устаревшей и отсутствует в спецификации.

Примеры

В этом примере <menu> используется для создания панели инструментов приложения для редактирования.

HTML

<menu>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</menu>

Обратите внимание, что функционально это ничем не отличается от следующего:

<ul>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</ul>

CSS

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

li {
  flex-grow: 1;
}

button {
  width: 100%;
}

Результат

Техническая сводка

Категории содержимого	Потоковое содержимое. Если среди дочерних элементов есть хотя бы один элемент `<li>`: осязаемое содержимое.
Допустимое содержимое	Ноль или более элементов `<li>`, `<script>` и `<template>`.
Пропуск тегов	Не допускается: обязательны и открывающий, и закрывающий теги.
Допустимые родительские элементы	Любой элемент, допускающий потоковое содержимое.
Неявная роль ARIA	`list`
Допустимые роли ARIA	`directory`, `group`, `listbox`, `menu`, `menubar`, `none`, `presentation`, `radiogroup`, `tablist`, `toolbar` или `tree`
Интерфейс DOM	`HTMLMenuElement`

Спецификации

Спецификация
HTML> # the-menu-element>

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari для iOS	Samsung Internet	WebView Android	WebView для iOS
`menu`	1	12	1	≤12.1	3	18	4	≤12.1	1	1.0	4.4	1

См. также

Другие связанные со списками элементы HTML: <ol>, <ul> и <li>.

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/menu

<menu> Элемент меню HTML