Тег <menu>
Описание
Тег <menu> создает семантический контейнер для списка команд/пунктов меню. В HTML5 был переопределен для создания как контекстных меню, так и панелей инструментов.
<menu type="context" id="file-menu">
<menuitem label="Открыть" onclick="openFile()"></menuitem>
<menuitem label="Сохранить" onclick="saveFile()"></menuitem>
<hr>
<menuitem label="Выход" onclick="closeApp()"></menuitem>
</menu>
<div contextmenu="file-menu">
Правый клик для меню
</div>
<menu type="toolbar">
<li><button onclick="cut()">Вырезать</button></li>
<li><button onclick="copy()">Копировать</button></li>
<li><button onclick="paste()">Вставить</button></li>
</menu>
<nav class="toolbar" role="toolbar">
<ul>
<li><button aria-label="Вырезать"><svg>...</svg></button></li>
<li><button aria-label="Копировать"><svg>...</svg></button></li>
</ul>
</nav>
Особенности:
- Поддержка браузерами ограничена (особенно
<menuitem>) - Для веб-приложений лучше использовать кастомные решения
- Семантически заменяет
<ul>для списков команд - Может содержать
<li>,<menuitem>,<hr>
Современный пример с ARIA:
<div class="dropdown">
<button aria-expanded="false" aria-controls="dropdown-menu">
Меню
</button>
<ul id="dropdown-menu" role="menu" hidden>
<li role="menuitem">Пункт 1</li>
<li role="menuitem">Пункт 2</li>
</ul>
</div>
<style>
[role="menu"] {
/* Стили меню */
}
</style>
Тег <menu> имеет ограниченную поддержку, и для создания меню чаще используют комбинацию <nav>, <ul> и ARIA-ролей.
Атрибуты
| label | Метка для меню |
| type | Тип меню (toolbar|context) |
| accesskey | Горячая клавиша для активации элемента |
| class | CSS-классы для стилизации элемента |
| contenteditable | Разрешает редактирование содержимого |
| data-* | Пользовательские данные элемента |
| dir | Направление текста (ltr|rtl) |
| hidden | Скрывает элемент от отображения |
| id | Уникальный идентификатор элемента |
| lang | Язык содержимого элемента |
| spellcheck | Включает проверку орфографии |
| style | Инлайновые CSS-стили элемента |
| tabindex | Порядок перехода при навигации по Tab |
| title | Всплывающая подсказка для элемента |
| translate | Определяет возможность перевода содержимого |
| compact | Компактный вид меню (устарел) |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 3.0 | 1.0 | 3.5 | 1.0 | 1.0 |