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## Child Components 10 11This component contains the [MenuItem](ts-basic-components-menuitem.md) and [MenuItemGroup](ts-basic-components-menuitemgroup.md) child components. 12 13## APIs 14 15Menu() 16 17Creates a fixed container for a menu. This API does not have any parameters. 18 19## Attributes 20 21In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 22 23| Name | Type | Description | 24| -------- | ------------------------- | ---------------------------------------------------------------- | 25| fontSize | [Length](ts-types.md#length) | Font size that applies to all texts in the menu. When **Length** is of the number type, the unit is fp.| 26 27## Example 28 29```ts 30@Entry 31@Component 32struct Index { 33 @State select: boolean = true 34 private iconStr: ResourceStr = $r("app.media.view_list_filled") 35 private iconStr2: ResourceStr = $r("app.media.view_list_filled") 36 37 @Builder 38 SubMenu() { 39 Menu() { 40 MenuItem({ content: "Copy", labelInfo: "Ctrl+C" }) 41 MenuItem({ content: "Paste", labelInfo: "Ctrl+V" }) 42 } 43 } 44 45 @Builder 46 MyMenu(){ 47 Menu() { 48 MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }) 49 MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }) 50 .enabled(false) 51 MenuItem({ 52 startIcon: this.iconStr, 53 content: "Menu option", 54 endIcon: $r("app.media.arrow_right_filled"), 55 builder: this.SubMenu.bind(this) 56 }) 57 MenuItemGroup({ header: 'Subtitle' }) { 58 MenuItem ({ content: "Menu option" }) 59 .selectIcon(true) 60 .selected(this.select) 61 .onChange((selected) => { 62 console.info("menuItem select" + selected); 63 this.iconStr2 = $r("app.media.icon"); 64 }) 65 MenuItem({ 66 startIcon: $r("app.media.view_list_filled"), 67 content: "Menu option", 68 endIcon: $r("app.media.arrow_right_filled"), 69 builder: this.SubMenu.bind(this) 70 }) 71 } 72 MenuItem({ 73 startIcon: this.iconStr2, 74 content: "Menu option", 75 endIcon: $r("app.media.arrow_right_filled") 76 }) 77 } 78 } 79 80 build() { 81 Row() { 82 Column() { 83 Text('click to show menu') 84 .fontSize(50) 85 .fontWeight(FontWeight.Bold) 86 } 87 .bindMenu(this.MyMenu) 88 .width('100%') 89 } 90 .height('100%') 91 } 92} 93``` 94 95 96
