menuitem
HTML5 menuitem element
The menuitem element allows you to add a command to a popup menu. »video
About menuitem
- is an optional element
- one or multiple menuitem elements allowed per HTML5 document but only inside menu element type popup
Display & support menuitem
- display in browser »details
Parents, children menuitem
- menuitem nested within elements »menuitem parents
»examples
»video
Attributes menuitem
- required: none
- optional: specific attributes, global attributes, event attributes
Syntax menuitem
| 1 | <> »video |
Attributes and Values menuitem (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| 1. | checked | = | "", , checked | - | < checked> | |
| 2. | command | = | text | - | < command="the_id_of_another_element"> | |
| 3. | default | = | "", , default | - | < default> | |
| 4. | disabled | = | "", , disabled | - | < disabled> | |
| 5. | icon | = | URL | - | < icon="plus.jpg"> | |
| 6. | label | = | text | - | < label="add border"> | |
| 7. | radiogroup | = | text | - | < radiogroup="name_of_a_group_of_commands" type="radio"> | |
| 8. | type | = | command, checkbox, radio | - | < type="radio"> | |
| All Specific Attributes | ||||||
| 2. global attributes | ||||||
| 1. | accesskey | = | keyboard key | »img | < accesskey="h"> | |
| 2. | class | = | class name | »html »img | < class="class_name"> | |
| 3. | contenteditable | = | "", , true, false | »html | < contenteditable="true"> | |
| 4. | contextmenu | = | menu id value | »html | < contextmenu="menu_id_value"> | |
| 5. | data-* | = | value | - | < data-http-error="404"> | |
| 6. | dir | = | ltr, rtl, auto | »html | < dir="ltr"> | |
| 7. | draggable | = | true, , false | »img | < draggable="false"> | |
| 8. | dropzone | = | copy, move, link, string:, file: | - | < dropzone="copy"> | |
| 9. | hidden | = | "", , hidden | »html »img | < hidden="hidden"> | |
| 10. | id | = | id name | »html »img | < id="unique_id_name"> | |
| 11. | itemid | = | URL | - | - | |
| 12. | itemprop | = | string | »link »a | - | |
| 13. | itemref | = | string | - | - | |
| 14. | itemscope | = | "", , itemscope | - | - | |
| 15. | itemtype | = | absolute URL | - | - | |
| 16. | lang | = | language code | »html »head»title »img | < lang="en"> | |
| 17. | spellcheck | = | "", , true, false | »html | < spellcheck="true"> | |
| 18. | style | = | CSS property:value | »html »img | < style="color:red"> | |
| 19. | tabindex | = | integer | »img | < tabindex="3"> | |
| 20. | title | = | text | »html »link»style »abbr»dfn »img »meter | < title="html page"> | |
| 21. | translate | = | "", yes, no | »html »img | < translate="yes"> | |
| All Global Attributes | ||||||
| 3. global event attributes | ||||||
| 1. | onclick | = | script | » list | <element onclick="script" > ... | |
| 2. | ondblclick | = | script | » list | <element ondblclick="script" > ... | |
| All Event Attributes | ||||||
Video demonstration menuitem element
HTML5 menuitem, adding a command to a context menu
| min | video details |
|---|---|
| 00:00 | video tutorial: menu and menuitem elements |
| 00:09 | menu element allows you to create a toolbar menu or a popup menu containing commands |
| 00:15 | this is an example of context menu containing 1 command |
| 00:18 | this is the command called "add border" |
| 00:23 | in browser: the command called "add border" when clicked adds a green border to the blue rectangle in page |
| 00:27 | the blue rectangle is the div having the id="zz" |
| 00:31 | this menu is a context menu (a popup menu) currently the value "popup" of the type attribute is not supported in browser while the deprecated value "context" still is, that is why our demo is based on "context" value instead of "popup" |
| 00:52 | the context menu in our case is activated through the global attribute "contexmenu" whose value (idmenu) is the value of the id attribute from menu element |
| 01:02 | contexmenu attribute applied on html root element is inherited by all elements in page → wherever we click on page, the command displays inside the menu |
| 01:12 | this area may be restricted to 1 element only: moving the contexmenu attribute from html element to div element → the command displays only when we right click above the div element (= the blue rectangle in page) |
| 01:27 | the menuitem element allows us to add a command inside our context menu where: |
| 01:32 | the label attribute gives the label of the command |
| 01:41 | the icon attribute holds the icon of the command |
| 01:48 | and the onclick mouse event holds a javascript function (= the command itself) |
For more information about the element, please see the specs: W3C ⁄ WHATWG