<menuitem> HTML

Тег <menuitem> (от англ. menu item — элемент меню) задаёт команду, которую пользователь может вызывать через контекстное меню.

Команда выглядит как текстовая метка, а также дополнительно может содержать небольшую картинку. Сама команда связана с программой на JavaScript.

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

Can I Use menu? Data on support for the menu feature across the major browsers from caniuse.com.

Полифилы для включения поддержки:

Синтаксис

<menu type="context" id="menu">
    <menuitem icon="image/edit.png" onclick="edit()" label="Править"></menuitem>
</menu> 

Закрывающий тег не обязателен.

WAI ARIA

Значение role по умолчанию: menuitem

Допустимые значения role:

  • menuitemcheckbox
  • menuitemradio

Атрибуты

  • checked — Устанавливает, что команда выбрана. Используется в сочетании с типом checkbox или radio.
  • default — Выбирает команду меню по умолчанию.
  • disabled — Блокирует команду меню.
  • icon — Адрес изображения, которое будет выводиться перед текстом команды.
  • label — Название команды показываемое пользователю.
  • radiogroup — Задаёт имя группы переключателей.
  • type — Задаёт тип команды.

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

Значения ARIA role

  • <menuitem type=command>role=menuitem
  • <menuitem type=checkbox>role=menuitemcheckbox
  • <menuitem type=radio>role=menuitemradio

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

Примеры

В данном примере в контекстное меню добавляется пункт с текстом «Править», при щелчке по которому происходит редактирование текста. Само меню меняется только при щелчке по абзацу. Пример работает только в браузере Firefox.

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>menuitem</title> 
        <style> 
            #edit { 
                width: 200px; 
                border: 1px solid #ccc; 
                display: none; 
            } 
        </style> 
        <script> 
            function edit() { 
                document.getElementById('text').style.display = 'none'; 
                document.getElementById('edit').style.display = 'block'; 
                document.getElementById('edit').value = document.getElementById('text').innerHTML; 
                document.getElementById('edit').focus(); 
            } 
            function text() { 
                document.getElementById('text').innerHTML = document.getElementById('edit').value; 
                document.getElementById('edit').style.display = 'none'; 
                document.getElementById('text').style.display = 'block'; 
            } 
        </script> 
    </head> 
    <body> 
        <p id="text" contextmenu="menu">Пример текста</p> 
        <form onsubmit="text(); return false"><input id="edit"></form>
        <menu type="context" id="menu">
            <menuitem icon="image/edit.png" onclick="edit()" label="Править"></menuitem>
        </menu> 
    </body> 
</html>