• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Menu
2
3
4You 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/arkui-ts/ts-universal-attributes-menu.md).
5
6
7## Creating a Menu in the Default Style
8
9Use 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.
10
11
12
13```ts
14Button('click for Menu')
15  .bindMenu([
16  {
17    value: 'Menu1',
18    action: () => {
19      console.info('handle Menu1 select')
20    }
21  }
22])
23```
24
25
26![en-us_image_0000001562940565](figures/en-us_image_0000001562940565.png)
27
28
29## Creating a Menu in a Custom Style
30
31If the default style does not meet requirements, you can use \@CustomBuilder to customize menu content. Menus can also be customized through the **bindMenu** API.
32
33
34### \@Builder: Customizing Menu Content
35
36
37```ts
38@State select: boolean = true
39private iconStr: ResourceStr = $r("app.media.view_list_filled")
40private iconStr2: ResourceStr = $r("app.media.view_list_filled")
41@Builder
42SubMenu() {
43  Menu() {
44    MenuItem({ content: "Copy", labelInfo: "Ctrl+C" })
45    MenuItem({ content: "Paste", labelInfo: "Ctrl+V" })
46  }
47}
48
49@Builder
50MyMenu(){
51  Menu() {
52    MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" })
53    MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }).enabled(false)
54    MenuItem({
55      startIcon: this.iconStr,
56      content: "Menu option",
57      endIcon: $r("app.media.arrow_right_filled"),
58      // 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.
59      builder: this.SubMenu.bind(this),
60    })
61    MenuItemGroup ({ header: 'Subtitle' }) {
62      MenuItem ({ content: "Menu option" })
63        .selectIcon(true)
64        .selected(this.select)
65        .onChange((selected) => {
66	   console.info("menuItem select" + selected);
67	   this.iconStr2 = $r("app.media.icon");
68        })
69      MenuItem({
70        startIcon: $r("app.media.view_list_filled"),
71        content: "Menu option",
72        endIcon: $r("app.media.arrow_right_filled"),
73        builder: this.SubMenu.bind(this)
74      })
75    }
76    MenuItem({
77      startIcon: this.iconStr2,
78      content: "Menu option",
79      endIcon: $r("app.media.arrow_right_filled")
80    })
81  }
82}
83
84```
85
86
87### Using the bindMenu Attribute to Bind a Component
88
89
90```ts
91Button('click for Menu')
92  .bindMenu(this.MyMenu)
93```
94
95
96![en-us_image_0000001511580924](figures/en-us_image_0000001511580924.png)
97
98
99## Creating a Context Menu Displayed Upon Right-clicking or Long Pressing
100
101Use 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.
102
103
104- The content in the @Builder is the same as that in the preceding section.
105
106- Check the menu popup mode and bind the component through the **bindContextMenu** attribute. In the example, the menu is displayed upon right-clicking.
107
108  ```ts
109  Button('click for Menu')
110    .bindContextMenu(this.MyMenu, ResponseType.RightClick)
111  ```
112