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) | No | 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**<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 40| selectIcon | boolean \| [ResourceStr](ts-types.md#resourcestr)<sup>10+</sup> | Whether to display the selected icon for a menu item is selected.<br>Default value: **false**<br>**true**: When a menu item is selected, the default tick icon is displayed.<br>**false**: When a menu item is selected, no icon is displayed.<br>**ResourceStr**: When a menu item is selected, the specified icon is displayed.| 41| contentFont<sup>10+</sup> | [Font](ts-types.md#font) | Font style of the menu item content. | 42| contentFontColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Font color of the menu item content. | 43| labelFont<sup>10+</sup> | [Font](ts-types.md#font) | Font style of the menu item label. | 44| labelFontColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Font color of the menu item label. | 45 46## Events 47 48| Name | Type | Description | 49| -------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | 50| 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.| 51 52## Example 53 54For details, see [Example in Menu](ts-basic-components-menu.md#example). 55