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-component-general-attributes.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> 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 | Value| Description | 163| --------------- | - | ------------------------------------------ | 164| SIDE_EXPAND | 0 | Default mode. Submenus are expanded on the side on the same plane.| 165| EMBEDDED_EXPAND | 1 | Embedded mode. Submenus are expanded while embedded within the main menu. | 166| STACK_EXPAND | 2 | Stack mode. Submenus are expanded above the main menu. | 167 168## Example 169 170### Example 1: Implementing a Multi-Level Menu 171 172This example demonstrates how to implement a multi-level menu by configuring the **builder** parameter in **MenuItem**. 173 174```ts 175@Entry 176@Component 177struct Index { 178 @State select: boolean = true 179 private iconStr: ResourceStr = $r("app.media.view_list_filled") 180 private iconStr2: ResourceStr = $r("app.media.arrow_right_filled") 181 182 @Builder 183 SubMenu() { 184 Menu() { 185 MenuItem({ content: "Copy", labelInfo: "Ctrl+C" }) 186 MenuItem({ content: "Paste", labelInfo: "Ctrl+V" }) 187 } 188 } 189 190 @Builder 191 MyMenu(){ 192 Menu() { 193 MenuItem({ startIcon: $r("app.media.icon"), content: "Menu item" }) 194 MenuItem({ startIcon: $r("app.media.icon"), content: "Menu item" }) 195 .enabled(false) 196 MenuItem({ 197 startIcon: this.iconStr, 198 content: "Menu item", 199 endIcon: this.iconStr2, 200 builder: ():void=>this.SubMenu() 201 }) 202 MenuItemGroup({ header: 'Subtitle' }) { 203 MenuItem({ 204 startIcon: this.iconStr, 205 content: "Menu item", 206 endIcon: this.iconStr2, 207 builder: ():void=>this.SubMenu() 208 }) 209 MenuItem({ 210 startIcon: $r("app.media.app_icon"), 211 content: "Menu item", 212 endIcon: this.iconStr2, 213 builder: ():void=>this.SubMenu() 214 }) 215 } 216 MenuItem({ 217 startIcon: this.iconStr, 218 content: "Menu item", 219 }) 220 } 221 } 222 223 build() { 224 Row() { 225 Column() { 226 Text('click to show menu') 227 .fontSize(50) 228 .fontWeight(FontWeight.Bold) 229 } 230 .bindMenu(this.MyMenu) 231 .width('100%') 232 } 233 .height('100%') 234 } 235} 236``` 237 238 239 240### Example 2: Setting the Symbol Icon 241 242This example demonstrates how to implement a menu with symbol icons by configuring **symbolStartIcon** and **symbolEndIcon**. 243 244```ts 245// xxx.ets 246import { SymbolGlyphModifier } from '@kit.ArkUI'; 247 248@Entry 249@Component 250struct Index { 251 @State startIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_mic')).fontSize('24vp'); 252 @State endIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontSize('24vp'); 253 @State selectIconModifier: SymbolGlyphModifier = 254 new SymbolGlyphModifier($r('sys.symbol.checkmark')).fontSize('24vp'); 255 @State select: boolean = true; 256 257 @Builder 258 SubMenu() { 259 Menu() { 260 MenuItem({ content: "Copy", labelInfo: "Ctrl+C" }) 261 MenuItem({ content: "Paste", labelInfo: "Ctrl+V" }) 262 } 263 } 264 265 @Builder 266 MyMenu() { 267 Menu() { 268 MenuItem({ symbolStartIcon: this.startIconModifier, content: "Menu item" }) 269 MenuItem({ symbolStartIcon: this.startIconModifier, content: "Menu item" }) 270 .enabled(false) 271 MenuItem({ 272 symbolStartIcon: this.startIconModifier, 273 content: "Menu item", 274 symbolEndIcon: this.endIconModifier, 275 builder: (): void => this.SubMenu() 276 }) 277 MenuItemGroup({ header: 'Subtitle' }) { 278 MenuItem({ 279 symbolStartIcon: this.startIconModifier, 280 content: "Menu item", 281 symbolEndIcon: this.endIconModifier, 282 builder: (): void => this.SubMenu() 283 }) 284 MenuItem({ 285 symbolStartIcon: this.startIconModifier, 286 content: "Menu item", 287 symbolEndIcon: this.endIconModifier, 288 builder: (): void => this.SubMenu() 289 }) 290 } 291 MenuItem({ 292 content: "Menu item", 293 }).selected(this.select).selectIcon(this.selectIconModifier) 294 } 295 } 296 297 build() { 298 Row() { 299 Column() { 300 Text('click to show menu') 301 .fontSize(50) 302 .fontWeight(FontWeight.Bold) 303 } 304 .bindMenu(this.MyMenu) 305 .width('100%') 306 } 307 .height('100%') 308 } 309} 310``` 311 312 313
