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**Atomic service API**: This API can be used in atomic services since API version 11. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name| Type | Mandatory| Description | 24| ------ | ------------------------------------------------------------ | ---- | ---------------------------- | 25| value | [MenuItemOptions](#menuitemoptions) \| [CustomBuilder](ts-types.md#custombuilder8) | No | Information about the menu item.| 26 27## MenuItemOptions 28 29**System capability**: SystemCapability.ArkUI.ArkUI.Full 30 31| Name | Type | Mandatory| Description | 32| --------- | ------------------------------------------- | ---- | -------------------------------------- | 33| startIcon | [ResourceStr](ts-types.md#resourcestr) | No | Path to the icon displayed on the left of the menu item.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 34| content | [ResourceStr](ts-types.md#resourcestr) | No | Content of the menu item.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 35| endIcon | [ResourceStr](ts-types.md#resourcestr) | No | Path to the icon displayed on the right of the menu item.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 36| labelInfo | [ResourceStr](ts-types.md#resourcestr) | No | Information about the ending label, for example, shortcut **Ctrl+C**.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 37| builder | [CustomBuilder](ts-types.md#custombuilder8) | No | Builder for a level-2 menu.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 38| symbolStartIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Path to the symbol icon displayed on the left of the menu item. When this parameter is set, the icon set through **startIcon** is not displayed.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 39| symbolEndIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Path to the symbol icon displayed on the right of the menu item. When this parameter is set, the icon set through **endIcon** is not displayed.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 40 41 42## Attributes 43 44In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 45 46### selected 47 48selected(value: boolean) 49 50Sets whether the menu item is selected. 51 52Since API version 10, this attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md). 53Since API version 18, this attribute supports two-way binding through [!!](../../../quick-start/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters). 54 55**Atomic service API**: This API can be used in atomic services since API version 11. 56 57**System capability**: SystemCapability.ArkUI.ArkUI.Full 58 59**Parameters** 60 61| Name| Type | Mandatory| Description | 62| ------ | ------- | ---- | ------------------------------------------------------------ | 63| value | boolean | Yes | Whether the menu item is selected.<br>Default value: **false**<br>**true**: The menu item is selected.<br> **false**: The menu item is not selected.| 64 65### selectIcon 66 67selectIcon(value: boolean | ResourceStr | SymbolGlyphModifier) 68 69Sets whether to display the selected icon when the menu item is selected. 70 71**Atomic service API**: This API can be used in atomic services since API version 11. 72 73**System capability**: SystemCapability.ArkUI.ArkUI.Full 74 75**Parameters** 76 77| Name| Type | Mandatory| Description | 78| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 79| value | boolean \| [ResourceStr](ts-types.md#resourcestr)<sup>10+</sup>\| [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md)<sup>12+</sup> | Yes | Whether to display the selected icon when the menu item is selected.<br>Default value: **false**<br>**true**: When the menu item is selected, the default tick icon is displayed.<br>**false**: When the menu item is selected, no icon is displayed.<br>**ResourceStr**: When the menu item is selected, the specified icon is displayed.<br>**SymbolGlyphModifier**: When the menu item is selected, the specified symbol icon is displayed.| 80### contentFont<sup>10+</sup> 81 82contentFont(value: Font) 83 84Sets the font style of the menu item content. 85 86**Atomic service API**: This API can be used in atomic services since API version 11. 87 88**System capability**: SystemCapability.ArkUI.ArkUI.Full 89 90**Parameters** 91 92| Name| Type | Mandatory| Description | 93| ------ | ------------------------ | ---- | ---------------------------- | 94| value | [Font](ts-types.md#font) | Yes | Font style of the menu item content.| 95 96### contentFontColor<sup>10+</sup> 97 98contentFontColor(value: ResourceColor) 99 100Sets the font color of the menu item content. 101 102**Atomic service API**: This API can be used in atomic services since API version 11. 103 104**System capability**: SystemCapability.ArkUI.ArkUI.Full 105 106**Parameters** 107 108| Name| Type | Mandatory| Description | 109| ------ | ------------------------------------------ | ---- | ---------------------------- | 110| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the menu item content.<br>Default value: **'#E5000000'**| 111 112### labelFont<sup>10+</sup> 113 114labelFont(value: Font) 115 116Sets the font style of the menu item label. 117 118**Atomic service API**: This API can be used in atomic services since API version 11. 119 120**System capability**: SystemCapability.ArkUI.ArkUI.Full 121 122**Parameters** 123 124| Name| Type | Mandatory| Description | 125| ------ | ------------------------ | ---- | ---------------------------- | 126| value | [Font](ts-types.md#font) | Yes | Font style of the menu item label.| 127 128### labelFontColor<sup>10+</sup> 129 130labelFontColor(value: ResourceColor) 131 132Sets the font color of the menu item label. 133 134**Atomic service API**: This API can be used in atomic services since API version 11. 135 136**System capability**: SystemCapability.ArkUI.ArkUI.Full 137 138**Parameters** 139 140| Name| Type | Mandatory| Description | 141| ------ | ------------------------------------------ | ---- | ---------------------------- | 142| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the menu item label.<br>Default value: **'#99000000'**| 143 144## Events 145 146### onChange 147 148onChange(callback: (selected: boolean) => void) 149 150Triggered when the selection status of the menu item is changed manually. 151 152**Atomic service API**: This API can be used in atomic services since API version 11. 153 154**System capability**: SystemCapability.ArkUI.ArkUI.Full 155 156**Parameters** 157 158| Name | Type | Mandatory| Description | 159| -------- | ------- | ---- | ------------------------------------------------------------ | 160| selected | boolean | Yes | Invoked when the selected status changes.<br>If the return value is **true**, the menu item is selected. If the return value is **false**, the menu item is not selected.| 161 162## Example 163 164See the example of [Menu](ts-basic-components-menu.md#example). 165