HTML тег <menuitem>
Тег HTML <menuitem> устарел и удалён из всех браузеров. Узнайте его историю и современную замену контекстного меню.
Тег HTML <menuitem> является устаревшим и удалён из всех основных браузеров — при размещении на странице он больше ничего не делает. Не используйте его. В этой главе объясняется, для чего он предназначался, почему был исключён и какие современные, полностью поддерживаемые способы создания меню пришли ему на смену.
Согласно спецификации, <menuitem> представлял отдельную команду или пункт меню, который пользователь мог вызвать из всплывающего меню, определённого с помощью тега <menu> — как правило, пользовательского контекстного меню по правой кнопке мыши или меню, прикреплённого к кнопке.
Почему он был удалён
<menuitem> и связанный атрибут contextmenu у <menu type="context"> были реализованы только в Firefox, в некоторых сборках скрытые за флагом, и так и не были выпущены в Chrome, Safari или Edge. Поскольку другие браузеры не приняли эту возможность, на неё нельзя было рассчитывать при кроссбраузерной разработке. Firefox в итоге удалил свою реализацию, и элемент был исключён из HTML Living Standard. При нулевой поддержке браузерами <menuitem> теперь представляет лишь исторический интерес.
Синтаксис (устаревший — нефункциональный)
Разметка ниже показывает, как раньше писали <menuitem>: вложенным внутрь элемента <menu>. Этот код ничего не делает ни в одном современном браузере — он приведён только для того, чтобы вы могли распознать его в старых документах.
<!-- Legacy, non-functional. Do NOT use in new projects. -->
<menu type="context" id="popup">
<menuitem label="Ordered list"></menuitem>
<menuitem label="Unordered list"></menuitem>
<menuitem label="Menu"></menuitem>
</menu>Современная замена: пользовательское контекстное меню
Чтобы сегодня создать меню по правой кнопке мыши, нужно прослушать событие contextmenu, предотвратить отображение стандартного меню браузера и показать собственный позиционированный <ul> (или <div>). Используйте роли меню WAI-ARIA для обеспечения доступности: role="menu" на контейнере, role="menuitem" на каждом пункте, aria-checked для переключателей и aria-disabled для недоступных команд.
<!DOCTYPE html>
<html>
<head>
<title>Custom context menu</title>
<style>
#menu {
position: absolute;
display: none;
margin: 0;
padding: 4px 0;
list-style: none;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
font: 14px sans-serif;
}
#menu li {
padding: 6px 16px;
cursor: pointer;
}
#menu li:hover {
background: #0d6efd;
color: #fff;
}
#menu li[aria-disabled="true"] {
color: #999;
cursor: default;
}
</style>
</head>
<body>
<p>Right-click anywhere on this page.</p>
<ul id="menu" role="menu">
<li role="menuitem">Ordered list</li>
<li role="menuitem">Unordered list</li>
<li role="menuitemcheckbox" aria-checked="false">Show line numbers</li>
<li role="menuitem" aria-disabled="true">Print (unavailable)</li>
</ul>
<script>
const menu = document.getElementById("menu");
document.addEventListener("contextmenu", (e) => {
e.preventDefault();
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
menu.style.display = "block";
});
document.addEventListener("click", () => {
menu.style.display = "none";
});
menu.addEventListener("click", (e) => {
const item = e.target.closest('[role="menuitemcheckbox"]');
if (item) {
const checked = item.getAttribute("aria-checked") === "true";
item.setAttribute("aria-checked", String(!checked));
}
});
</script>
</body>
</html>Этот подход работает во всех современных браузерах и полностью находится под вашим контролем в части стилизации и обработки клавиатуры.
Другие современные варианты
- Элемент
<menu>. Тег<menu>по-прежнему является допустимым HTML, однако его смысл сузился: теперь он представляет панель инструментов (семантический список команд), ведя себя примерно как<ul>. Он больше не создаёт нативных контекстных меню. <details>и<summary>. Для простого раскрывающегося блока по клику или лёгкого выпадающего списка, не требующего JavaScript, используйте<details>с меткой<summary>.
Атрибуты (все устаревшие)
| Атрибут | Значение | Описание |
|---|---|---|
| checked | checked | Определяет, что команда / пункт меню должны быть отмечены при загрузке страницы (используется только для type = "radio" и type = "checkbox"). |
| default | default | Помечает команду/пункт меню как команду по умолчанию. |
| disabled | disabled | Определяет, что команда/пункт меню должны быть отключены. |
| icon | icon | Определяет значок для пункта меню/команды. |
| label | text | Определяет текст, который будет отображаться для пользователя. Атрибут обязателен. |
| radiogroup | groupname | Определяет имя группы команд, которые переключаются при переключении команды/пункта меню. Используется только для type = "radio". |
| type | checkbox, command, radio | Определяет тип команды/пункта меню. Значение по умолчанию — command. |
Примечание: Каждый из перечисленных атрибутов устарел и игнорируется браузерами, поскольку сам элемент не поддерживается. Таблица приведена исключительно для справки. При переносе старого кода замените эти атрибуты на эквиваленты ARIA в вашем пользовательском меню:
checked/type="checkbox"/type="radio"→role="menuitemcheckbox"илиrole="menuitemradio"сaria-checked.disabled→aria-disabled="true".label→ видимое текстовое содержимое вашего пункта меню.icon,default,radiogroup→ обрабатывайте самостоятельно с помощью CSS и JavaScript.
Несмотря на то что он никогда не имел эффекта, <menuitem> был задокументирован как поддерживающий Глобальные атрибуты и Атрибуты событий.