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