1# Menu Control (Menu)
2You can use menu APIs to display a context menu, a vertical list of items displayed by long pressing, clicking, or right-clicking a component. For details, see [Menu Control](../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md).
3
4A context menu displayed using [bindContextMenu](../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md#bindcontextmenu12) and configured with a preview image has a mask applied; in this case, it is modal.
5
6A context menu displayed using [bindMenu](../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md#bindmenu11), or **bindContextMenu** without a preview image configured, does not have a mask applied; in this case, it is non-modal.
7
8## Lifecycle
9
10| Name| Type| Description|
11| --- | --- | --- |
12| aboutToAppear  | () =>  void | Callback triggered when the menu is about to appear.|
13| onAppear | () =>  void | Callback triggered when the menu is displayed.|
14| aboutToDisappear | () =>  void | Callback triggered when the menu is about to disappear.|
15| onDisappear  | () =>  void | Callback triggered when the menu is hidden.|
16
17
18
19## Creating a Menu in the Default Style
20
21Use the **bindMenu** API to implement a menu. **bindMenu** responds to the click event of the bound component. When the bound component is clicked, the menu is displayed.
22
23```ts
24Button('click for Menu')
25  .bindMenu([
26    {
27      value: 'Menu1',
28      action: () => {
29        console.info('handle Menu1 select')
30      }
31    }
32  ])
33```
34
35![en-us_image_0000001562940565](figures/en-us_image_0000001562940565.png)
36
37## Creating a Menu in a Custom Style
38
39If the default style does not meet requirements, you can use [@Builder](../../application-dev/quick-start/arkts-builder.md) to customize menu content and use the **bindMenu** API to bind the custom menu to a component.
40
41### @Builder: Customizing Menu Content
42
43```ts
44class Tmp {
45  iconStr2: ResourceStr = $r("app.media.view_list_filled")
46
47  set(val: Resource) {
48    this.iconStr2 = val
49  }
50}
51
52@Entry
53@Component
54struct menuExample {
55  @State select: boolean = true
56  private iconStr: ResourceStr = $r("app.media.view_list_filled")
57  private iconStr2: ResourceStr = $r("app.media.view_list_filled")
58
59  @Builder
60  SubMenu() {
61    Menu() {
62      MenuItem({ content: "Copy", labelInfo: "Ctrl+C" })
63      MenuItem({ content: "Paste", labelInfo: "Ctrl+V" })
64    }
65  }
66
67  @Builder
68  MyMenu() {
69    Menu() {
70      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" })
71      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }).enabled(false)
72      MenuItem({
73        startIcon: this.iconStr,
74        content: "Menu option",
75        endIcon: $r("app.media.arrow_right_filled"),
76        // When the builder parameter is set, it indicates that a submenu is bound to a menu item. When the user hovers the cursor over the menu item, the submenu is displayed.
77        builder: this.SubMenu
78      })
79      MenuItemGroup ({ header: 'Subtitle' }) {
80        MenuItem ({ content: "Menu option" })
81          .selectIcon(true)
82          .selected(this.select)
83          .onChange((selected) => {
84            console.info("menuItem select" + selected);
85            let Str: Tmp = new Tmp()
86            Str.set($r("app.media.icon"))
87          })
88        MenuItem({
89          startIcon: $r("app.media.view_list_filled"),
90          content: "Menu option",
91          endIcon: $r("app.media.arrow_right_filled"),
92          builder: this.SubMenu
93        })
94      }
95
96      MenuItem({
97        startIcon: this.iconStr2,
98        content: "Menu option",
99        endIcon: $r("app.media.arrow_right_filled")
100      })
101    }
102  }
103
104  build() {
105    // ...
106  }
107}
108
109```
110
111### Using the bindMenu Attribute to Bind a Component
112
113```ts
114Button('click for Menu')
115  .bindMenu(this.MyMenu)
116```
117
118![en-us_image_0000001511580924](figures/en-us_image_0000001511580924.png)
119
120## Creating a Context Menu Displayed Upon Right-clicking or Long Pressing
121
122Use the **bindContextMenu** API to customize the menu content and menu popup mode: right-click or long press. The menu items that are displayed using **bindContextMenu** are in an independent child window and can be displayed outside the application window.
123
124- The content in the @Builder is the same as that in the preceding section.
125- Check the menu popup mode and bind the component through the **bindContextMenu** attribute. In the example, the menu is displayed upon right-clicking.
126
127  ```ts
128  Button('click for Menu')
129    .bindContextMenu(this.MyMenu, ResponseType.RightClick)
130  ```
131