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