• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# MenuItem
2
3The **\<MenuItem>** component represents an item in a menu.
4
5> **NOTE**
6>
7> This component is supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
8
9## Child Components
10
11Not supported
12
13## APIs
14
15MenuItem(value?: MenuItemOptions| CustomBuilder)
16
17**Parameters**
18
19| Name | Type                                                                                                                         | Mandatory| Description                    |
20| ----- | ----------------------------------------------------------------------------------------------------------------------------- | ---- | ---------------------------- |
21| value | [MenuItemOptions](ts-basic-components-menuitem.md#menuitemoptions) \| [CustomBuilder](ts-types.md#custombuilder8) | No  | Information about the menu item.|
22
23## MenuItemOptions
24
25| Name     | Type                                    | Mandatory| Description                                  |
26| --------- | ---------------------------------------- | ---- | -------------------------------------- |
27| startIcon | [ResourceStr](ts-types.md#resourcestr)      | No  | Path to the icon displayed on the left of the menu item.      |
28| content   | [ResourceStr](ts-types.md#resourcestr)      | Yes  | Content of the menu item.                      |
29| endIcon   | [ResourceStr](ts-types.md#resourcestr)      | No  | Path to the icon displayed on the right of the menu item.      |
30| labelInfo | [ResourceStr](ts-types.md#resourcestr)      | No  | Information about the ending label, for example, shortcut **Ctrl+C**. |
31| builder   | [CustomBuilder](ts-types.md#custombuilder8) | No  | Builder for a level-2 menu.                    |
32
33## Attributes
34
35In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
36
37| Name      | Type| Description                                    |
38| ---------- | -------- | ---------------------------------------- |
39| selected   | boolean  | Whether the menu item is selected.<br>Default value: **false** |
40| selectIcon | boolean  | Whether to display the icon of the menu item being selected.|
41
42## Events
43
44| Name    | Type                   | Description                                                                                                                                                           |
45| -------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
46| onChange | (selected: boolean) => void | Triggered when the selection status of the menu item is changed manually.<br>The value **true** means that the menu item is selected, and **false** means the opposite. |
47
48## Example
49
50For details, see [Example in Menu](ts-basic-components-menu.md#example).
51