1# menu
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<menu>** component provides menus as temporary pop-up windows to display operations that can be performed by users.
8
9## Required Permissions
10
11None
12
13
14## Child Components
15
16Only the **[\<option>](js-components-basic-option.md)** component is supported.
17
18
19## Attributes
20
21In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
22
23| Name    | Type    | Default Value  | Mandatory  | Description                                      |
24| ------ | ------ | ----- | ---- | ---------------------------------------- |
25| target | string | -     | No   | Target element to which the menu is attached. When the target element is clicked, the menu is automatically displayed. The menu is preferentially displayed in the lower right corner of the target element. If the visible space on the right is insufficient, the menu is moved leftward. If the visible space in the lower part is insufficient, the menu is moved upward.|
26| type   | string | click | No   | Mode in which the target element triggers the pop-up menu. Available values are as follows:<br>- **click**: The pop-up menu is triggered by clicking the target element.<br>- **longpress**: The pop-up menu is triggered by long pressing the target element.|
27| title  | string | -     | No   | Title of the menu.                                 |
28
29>  **NOTE**
30>
31>  The **focusable** and **disabled** attributes are not supported.
32
33
34## Styles
35
36The following styles are supported.
37
38| Name            | Type                        | Default Value       | Mandatory  | Description                                      |
39| -------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
40| text-color     | &lt;color&gt;              | -          | No   | Font color of the menu.                              |
41| font-size      | &lt;length&gt;             | 30px       | No   | Font size of the menu.                              |
42| allow-scale    | boolean                    | true       | No   | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
43| letter-spacing | &lt;length&gt;             | 0          | No   | Character spacing of the menu.                              |
44| font-style     | string                     | normal     | No   | Font style of the menu. For details, see **font-weight** of the [**\<text>**](js-components-basic-text.md#styles) component.|
45| font-weight    | number \| string           | normal     | No   | Font weight of the menu. For details, see **font-weight** of the [**\<text>**](js-components-basic-text.md#styles) component.|
46| font-family    | string                     | sans-serif | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](js-components-common-customizing-font.md) is used for the text.|
47
48
49## Events
50
51The following events are supported.
52
53| Name      | Parameter                       | Description                                      |
54| -------- | ------------------------- | ---------------------------------------- |
55| selected | { value:value } | Triggered when a value in the menu is selected. The return value is the **value** attribute of the **\<option>** component.|
56| cancel   | -                         | Triggered when an operation is canceled by the user.                                   |
57
58
59## Methods
60
61The following methods are supported.
62
63| Name  | Parameter                               | Description                                      |
64| ---- | --------------------------------- | ---------------------------------------- |
65| show | { x:x,  y:y } | Displays the menu. **x** and **y** specify the position of the displayed menu. **x** indicates the x coordinate from the left edge of the visible area, and does not include any scrolling offset. **y** indicates the y coordinate from the upper edge of the visible area, and does not include any scrolling offset or a status bar. The menu is preferentially displayed in the lower right corner of the target element. If the visible space on the right is insufficient, the menu is moved leftward. If the visible space in the lower part is insufficient, the menu is moved upward.|
66
67## Example
68
69```html
70<!-- xxx.hml -->
71<div class="container">
72  <text onclick="onTextClick" class="title-text">Show popup menu.</text>
73  <menu id="apiMenu" onselected="onMenuSelected">
74    <option value="Item 1">Item 1</option>
75    <option value="Item 2">Item 2</option>
76    <option value="Item 3">Item 3</option>
77  </menu>
78</div>
79```
80
81```css
82/* xxx.css */
83.container {
84  flex-direction: column;
85  align-items: flex-start;
86  justify-content: center;
87}
88.title-text {
89  margin: 20px;
90}
91```
92
93```js
94// xxx.js
95import promptAction from '@ohos.promptAction';
96export default {
97  onMenuSelected(e) {
98    promptAction.showToast({
99      message: e.value
100    })
101  },
102  onTextClick() {
103    this.$element("apiMenu").show({x:280,y:120});
104  }
105}
106```
107
108![menu13](figures/menu13.gif)
109