1# Menu
2
3The **Menu** component is a vertical list of items presented to the user.
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> - The **Menu** component must be used together with the [bindMenu](ts-universal-attributes-menu.md#bindmenu) or [bindContextMenu](ts-universal-attributes-menu.md#bindcontextmenu8) method. It does not work when used alone.
10
11## Child Components
12
13This component contains the [MenuItem](ts-basic-components-menuitem.md) and [MenuItemGroup](ts-basic-components-menuitemgroup.md) child components.
14
15## APIs
16
17Menu()
18
19Creates a fixed container for a menu. This API does not have any parameters.
20
21> **NOTE**
22>
23> Rules for calculating the width of menus and menu items:
24>
25> During the layout, the width of each menu item is expected to be the same. If a child component has its width set, the [size calculation rule](ts-universal-attributes-size.md#constraintsize) prevails.
26>
27> If the width is not set, the **Menu** component sets the default width of two columns for the **MenuItem** and **MenuItemGroup** child components. If a menu item's content area is wider than two columns, the **Menu** component automatically expands the menu item content area.
28>
29> When the width is set, the **Menu** component sets the **MenuItem** and **MenuItemGroup** child components to the fixed width (set width minus the padding).
30>
31> For the menu border [width](ts-universal-attributes-size.md#width), the minimum value is 64 vp.
32
33**Atomic service API**: This API can be used in atomic services since API version 11.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37## Attributes
38
39In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
40
41### fontSize<sup>(deprecated)</sup>
42
43fontSize(value: Length)
44
45Sets the size of all text within the menu.
46
47This API is deprecated since API version 10. You are advised to use [font](#font10) instead.
48
49**System capability**: SystemCapability.ArkUI.ArkUI.Full
50
51**Parameters**
52
53| Name| Type                        | Mandatory| Description                                                    |
54| ------ | ---------------------------- | ---- | -------------------------------------------------------- |
55| value  | [Length](ts-types.md#length) | Yes  | Size of all text within the menu. If the value of the Length type is a number, the unit is fp.|
56
57### font<sup>10+</sup>
58
59font(value: Font)
60
61Sets the size of all text within the menu.
62
63**Atomic service API**: This API can be used in atomic services since API version 11.
64
65**System capability**: SystemCapability.ArkUI.ArkUI.Full
66
67**Parameters**
68
69| Name| Type                    | Mandatory| Description                                                        |
70| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
71| value  | [Font](ts-types.md#font) | Yes  | Size of all text within the menu.<br>Default value:<br>{<br>      size: 16,<br>      family: 'HarmonyOS Sans',<br>      weight: FontWeight.Medium,<br>      style: FontStyle.Normal<br>} |
72### fontColor<sup>10+</sup>
73
74fontColor(value: ResourceColor)
75
76Sets the font color of all text within the menu.
77
78**Atomic service API**: This API can be used in atomic services since API version 11.
79
80**System capability**: SystemCapability.ArkUI.ArkUI.Full
81
82**Parameters**
83
84| Name| Type                                      | Mandatory| Description                  |
85| ------ | ------------------------------------------ | ---- | ---------------------- |
86| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Font color of all text within the menu.<br>Default value: **'#E5000000'**|
87
88### radius<sup>10+</sup>
89
90radius(value: Dimension | BorderRadiuses)
91
92Sets the radius of the menu border corners.
93
94**Atomic service API**: This API can be used in atomic services since API version 11.
95
96**System capability**: SystemCapability.ArkUI.ArkUI.Full
97
98**Parameters**
99
100| Name| Type                                                        | Mandatory| Description                                                        |
101| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
102| value  | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](ts-types.md#borderradiuses9) | Yes  | Radius of the menu border corners.<br>Default value: **8vp** for 2-in-1 devices and **20vp** for other devices<br><br> Since API version 12, if the sum of the two maximum corner radii in the horizontal direction exceeds the menu width, or if the sum of the two maximum corner radii in the vertical direction exceeds the menu height, the default corner radius will be used for all four corners of the menu.|
103
104### menuItemDivider<sup>12+</sup>
105
106menuItemDivider(options: DividerStyleOptions | undefined)
107
108Sets the style of the menu item divider. If this attribute is not set, the divider will not be displayed.
109
110If the sum of **startMargin** and **endMargin** exceeds the component width, both **startMargin** and **endMargin** will be set to **0**.
111
112**Atomic service API**: This API can be used in atomic services since API version 12.
113
114**System capability**: SystemCapability.ArkUI.ArkUI.Full
115
116**Parameters**
117
118| Name    | Type                                                    | Mandatory        | Description          |
119|---------|--------------------------------------------------------|------------| -------------- |
120| options | [DividerStyleOptions](ts-types.md#dividerstyleoptions12) \|  undefined | Yes  | Style of the menu item divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start edge of the menu item.<br>- **endMargin**: distance between the divider and the end edge of the menu item.|
121
122### menuItemGroupDivider<sup>12+</sup>
123
124menuItemGroupDivider(options: DividerStyleOptions | undefined)
125
126Sets the style of the top and bottom dividers for the menu item group. If this attribute is not set, the dividers will be displayed by default.
127
128**Atomic service API**: This API can be used in atomic services since API version 12.
129
130**System capability**: SystemCapability.ArkUI.ArkUI.Full
131
132**Parameters**
133
134| Name    | Type                                                    | Mandatory        | Description          |
135|---------|--------------------------------------------------------|------------| -------------- |
136| options | [DividerStyleOptions](ts-types.md#dividerstyleoptions12) \|  undefined | Yes  | Style of the top and bottom dividers for the menu item group.<br>- **strokeWidth**: stroke width of the divider. The default value is 1 px.<br>- **color**: color of the divider. The default value is **#33000000**.<br>- **startMargin**: distance between the divider and the start edge of the menu item group. The default value is **16**.<br>- **endMargin**: distance between the divider and the end edge of the menu item group. The default value is **16**.|
137
138### subMenuExpandingMode<sup>12+</sup>
139
140subMenuExpandingMode(mode: SubMenuExpandingMode)
141
142Sets the submenu expanding mode of the menu.
143
144**Atomic service API**: This API can be used in atomic services since API version 12.
145
146**System capability**: SystemCapability.ArkUI.ArkUI.Full
147
148**Parameters**
149
150| Name| Type                        | Mandatory| Description          |
151| ------ | ---------------------------- | ---- |--------------|
152| mode  | [SubMenuExpandingMode](#submenuexpandingmode12) | Yes  | Submenu expanding mode of the menu.<br>Default value: **SubMenuExpandingMode.SIDE_EXPAND** |
153
154## SubMenuExpandingMode<sup>12+</sup>
155
156Enumerates the submenu expanding modes.
157
158**Atomic service API**: This API can be used in atomic services since API version 12.
159
160**System capability**: SystemCapability.ArkUI.ArkUI.Full
161
162| Name           | Description                                      |
163| --------------- | ------------------------------------------ |
164| SIDE_EXPAND     | Default mode. Submenus are expanded on the side on the same plane.|
165| EMBEDDED_EXPAND | Embedded mode. Submenus are expanded while embedded within the main menu.    |
166| STACK_EXPAND    | Stack mode. Submenus are expanded above the main menu.      |
167
168## Example
169
170### Example 1
171
172```ts
173@Entry
174@Component
175struct Index {
176  @State select: boolean = true
177  private iconStr: ResourceStr = $r("app.media.view_list_filled")
178  private iconStr2: ResourceStr = $r("app.media.arrow_right_filled")
179
180  @Builder
181  SubMenu() {
182    Menu() {
183      MenuItem({ content: "Copy", labelInfo: "Ctrl+C" })
184      MenuItem({ content: "Paste", labelInfo: "Ctrl+V" })
185    }
186  }
187
188  @Builder
189  MyMenu(){
190    Menu() {
191      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu item" })
192      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu item" })
193        .enabled(false)
194      MenuItem({
195        startIcon: this.iconStr,
196        content: "Menu item",
197        endIcon: this.iconStr2,
198        builder: ():void=>this.SubMenu()
199      })
200      MenuItemGroup({ header: 'Subtitle' }) {
201        MenuItem({
202          startIcon: this.iconStr,
203          content: "Menu item",
204          endIcon: this.iconStr2,
205          builder: ():void=>this.SubMenu()
206        })
207        MenuItem({
208          startIcon: $r("app.media.app_icon"),
209          content: "Menu item",
210          endIcon: this.iconStr2,
211          builder: ():void=>this.SubMenu()
212        })
213      }
214      MenuItem({
215        startIcon: this.iconStr,
216        content: "Menu item",
217      })
218    }
219  }
220
221  build() {
222    Row() {
223      Column() {
224        Text('click to show menu')
225          .fontSize(50)
226          .fontWeight(FontWeight.Bold)
227      }
228      .bindMenu(this.MyMenu)
229      .width('100%')
230    }
231    .height('100%')
232  }
233}
234```
235
236![menu](figures/menu.png)
237
238### Example 2
239
240This example demonstrates a regular menu (using symbol-type icons).
241
242```ts
243// xxx.ets
244import { SymbolGlyphModifier } from '@kit.ArkUI';
245
246@Entry
247@Component
248struct Index {
249  @State startIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_mic')).fontSize('24vp');
250  @State endIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontSize('24vp');
251  @State selectIconModifier: SymbolGlyphModifier =
252    new SymbolGlyphModifier($r('sys.symbol.checkmark')).fontSize('24vp');
253  @State select: boolean = true;
254
255  @Builder
256  SubMenu() {
257    Menu() {
258      MenuItem({ content: "Copy", labelInfo: "Ctrl+C" })
259      MenuItem({ content: "Paste", labelInfo: "Ctrl+V" })
260    }
261  }
262
263  @Builder
264  MyMenu() {
265    Menu() {
266      MenuItem({ symbolStartIcon: this.startIconModifier, content: "Menu item" })
267      MenuItem({ symbolStartIcon: this.startIconModifier, content: "Menu item" })
268        .enabled(false)
269      MenuItem({
270        symbolStartIcon: this.startIconModifier,
271        content: "Menu item",
272        symbolEndIcon: this.endIconModifier,
273        builder: (): void => this.SubMenu()
274      })
275      MenuItemGroup({ header: 'Subtitle' }) {
276        MenuItem({
277          symbolStartIcon: this.startIconModifier,
278          content: "Menu item",
279          symbolEndIcon: this.endIconModifier,
280          builder: (): void => this.SubMenu()
281        })
282        MenuItem({
283          symbolStartIcon: this.startIconModifier,
284          content: "Menu item",
285          symbolEndIcon: this.endIconModifier,
286          builder: (): void => this.SubMenu()
287        })
288      }
289      MenuItem({
290        content: "Menu item",
291      }).selected(this.select).selectIcon(this.selectIconModifier)
292    }
293  }
294
295  build() {
296    Row() {
297      Column() {
298        Text('click to show menu')
299          .fontSize(50)
300          .fontWeight(FontWeight.Bold)
301      }
302      .bindMenu(this.MyMenu)
303      .width('100%')
304    }
305    .height('100%')
306  }
307}
308```
309
310![en-us_image_0000001174582862](figures/normal-symbol.jpg)
311