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) or [bindContextMenu](ts-universal-attributes-menu.md) 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 | [Length](ts-types.md#length) | Font size of the menu text. When **Length** is of the number type, the unit is fp.| 28 29## Example 30 31```ts 32@Entry 33@Component 34struct Index { 35 @State select: boolean = true 36 private iconStr: ResourceStr = $r("app.media.view_list_filled") 37 private iconStr2: ResourceStr = $r("app.media.view_list_filled") 38 39 @Builder 40 SubMenu() { 41 Menu() { 42 MenuItem({ content: "Copy", labelInfo: "Ctrl+C" }) 43 MenuItem({ content: "Paste", labelInfo: "Ctrl+V" }) 44 } 45 } 46 47 @Builder 48 MyMenu(){ 49 Menu() { 50 MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }) 51 MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }) 52 .enabled(false) 53 MenuItem({ 54 startIcon: this.iconStr, 55 content: "Menu option", 56 endIcon: $r("app.media.arrow_right_filled"), 57 builder: this.SubMenu.bind(this) 58 }) 59 MenuItemGroup({ header: 'Subtitle' }) { 60 MenuItem ({ content: "Menu option" }) 61 .selectIcon(true) 62 .selected(this.select) 63 .onChange((selected) => { 64 console.info("menuItem select" + selected); 65 this.iconStr2 = $r("app.media.icon"); 66 }) 67 MenuItem({ 68 startIcon: $r("app.media.view_list_filled"), 69 content: "Menu option", 70 endIcon: $r("app.media.arrow_right_filled"), 71 builder: this.SubMenu.bind(this) 72 }) 73 } 74 MenuItem({ 75 startIcon: this.iconStr2, 76 content: "Menu option", 77 endIcon: $r("app.media.arrow_right_filled") 78 }) 79 } 80 } 81 82 build() { 83 Row() { 84 Column() { 85 Text('click to show menu') 86 .fontSize(50) 87 .fontWeight(FontWeight.Bold) 88 } 89 .bindMenu(this.MyMenu) 90 .width('100%') 91 } 92 .height('100%') 93 } 94} 95``` 96 97 98
