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## Attributes 22 23In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 24 25| Name | Type | Description | 26| -------- | ------------------------- | ---------------------------------------------------------------- | 27| fontSize<sup>(deprecated)</sup> | [Length](ts-types.md#length) | Font size of the menu text. When **Length** is of the number type, the unit is fp.<br>This API is deprecated since API version 10. You are advised to use **font** instead.| 28| font<sup>10+</sup> | [Font](ts-types.md#font) | Font style of the menu text.| 29| fontColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Font color of the menu text.| 30| radius<sup>10+</sup> | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](ts-types.md#borderradiuses9) | Radius of the menu border corners.<br> The default value follows the theme. If the value is less than half of the menu width, the default value will be used.| 31| width<sup>10+</sup> | [Length](ts-types.md#length) | Menu border width.<br> The minimum width is 64 vp.| 32 33## Example 34 35```ts 36@Entry 37@Component 38struct Index { 39 @State select: boolean = true 40 private iconStr: ResourceStr = $r("app.media.view_list_filled") 41 private iconStr2: ResourceStr = $r("app.media.view_list_filled") 42 43 @Builder 44 SubMenu() { 45 Menu() { 46 MenuItem({ content: "Copy", labelInfo: "Ctrl+C" }) 47 MenuItem({ content: "Paste", labelInfo: "Ctrl+V" }) 48 } 49 } 50 51 @Builder 52 MyMenu(){ 53 Menu() { 54 MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }) 55 MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }) 56 .enabled(false) 57 MenuItem({ 58 startIcon: this.iconStr, 59 content: "Menu option", 60 endIcon: $r("app.media.arrow_right_filled"), 61 builder: ():void=>this.SubMenu() 62 }) 63 MenuItemGroup({ header: 'Subtitle' }) { 64 MenuItem ({ content: "Menu option" }) 65 .selectIcon(true) 66 .selected(this.select) 67 .onChange((selected) => { 68 console.info("menuItem select" + selected); 69 this.iconStr2 = $r("app.media.icon"); 70 }) 71 MenuItem({ 72 startIcon: $r("app.media.view_list_filled"), 73 content: "Menu option", 74 endIcon: $r("app.media.arrow_right_filled"), 75 builder: ():void=>this.SubMenu() 76 }) 77 } 78 MenuItem({ 79 startIcon: this.iconStr2, 80 content: "Menu option", 81 endIcon: $r("app.media.arrow_right_filled") 82 }) 83 } 84 } 85 86 build() { 87 Row() { 88 Column() { 89 Text('click to show menu') 90 .fontSize(50) 91 .fontWeight(FontWeight.Bold) 92 } 93 .bindMenu(this.MyMenu) 94 .width('100%') 95 } 96 .height('100%') 97 } 98} 99``` 100 101 102
