HTML тег <menu>

Элемент <menu> (от англ. "menu" ‒ «меню») создаёт область контекстного меню, панели инструментов. Внутрь данного элемента вкладываются элементы <li> или <menuitem>.

В HTML4 элемент <menu> вышел из употребления, вместо него рекомендуется использовать <ul>. В HTML5 элемент <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для элемента <command> и создания меню.

Совет: Для настройки стилей списка меню используйте CSS.

Синтаксис

HTML	`<menu> <li>...</li> </menu>`
HTML5	`<menu> <menuitem>...</menuitem> </menu>`

Закрывающий тег

Обязателен.

Атрибуты

label

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

type

Этот атрибут указывает тип объявляемого меню и может принимать одно из двух значений:

context: Указывает состояние всплывающего меню, которое представляет группу команд, активированных через другой элемент. Это может быть контекстное меню для элемента с атрибутом contextmenu. Это значение является значением по умолчанию, если атрибут отсутствует, а родительский элементом является <menu>.
toolbar: Указывает состояние панели инструментов, которая представляет собой список активных команд для взаимодействия с пользователем. Команды могут быть представлены в виде неупорядоченного списка элементов <li> или, если у элемента нет дочерних элементов <menu>, содержимое потока, описывающее доступные команды. Это значение является значением по умолчанию, если атрибут отсутствует.

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

Стилизация по умолчанию

Большинство браузеров отобразит элемент <menu> со следующими значениями CSS по умолчанию:

menu {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

Различия между HTML 4.01 и HTML5

В HTML 4.01 элемент считался устаревшим, в HTML5 он был переопределён.

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

Контекстное меню:

Пример HTML:

Попробуй сам

<div contextmenu="popup-menu">
  Щелкните правой кнопкой мыши, чтобы увидеть настроенное контекстное меню.
</div>

<menu type="context" id="popup-menu">
  <menuitem>Действие</menuitem>
  <menuitem>Другое действие</menuitem>
  <hr>
  <menuitem>Отдельное действие</menuitem>
</menu>

В данном примере в контекстное меню добавлены пункты: «Действие», «Другое действие» и «Отдельное действие» (рис. 1).

Рис. 1. Контекстне меню в браузере Firefox

Примечание:

Firefox поддерживает только создание контекстного меню, когда значение атрибута type равно context.

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

Спецификация	Статус
WHATWG HTML Living Standard (WHATWG)	Живой стандарт
HTML 5.1 (W3C)	Рекомендация

Поддержка браузерами

Элемент
<menu>						8.0+

Учебник HTML

HTML уроки: HTML Элементы

HTML Списки

Справочники