We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Cookie Settings
Only Essential Cookies
Accept All
MaterialsConsole

HarmonyOS

输入关键字搜索
HMS Core
AppGallery Connect
HUAWEI HiAI
CTRL+K

menu Development

Last updated: 2026-09-08 08:15
Content overview

The <menu> component serves as a temporary pop-up window to display operations that users can perform. For details, see menu.

Creating a <menu> Component

Create a <menu> component in the .hml file under pages/index and add the target, type, and title attributes.

Collapse
Word wrap
Dark theme
Copy code
  1. <!-- xxx.hml-->
  2. <div class="container">
  3.   <text class="title-text" id="textId">show menu</text>
  4.   <menu target="textId" type="click" title="title">
  5.     <option value="Item 1">Item 1</option>
  6.     <option value="Item 2">Item 2</option>
  7.     <option value="Item 3">Item 3</option>
  8.   </menu>
  9. </div>
Collapse
Word wrap
Dark theme
Copy code
  1. /* xxx.css */
  2. .container{
  3.   width: 100%;
  4.   height: 100%;
  5.   flex-direction: column;
  6.   background-color: #F1F3F5;
  7.   align-items: center;
  8.   justify-content: center;
  9.   width: 100%;
  10. }
  11. .title-text{
  12.   font-size: 35px;
  13. }

NOTE

  • The <menu> component supports only the option child component.

  • The <menu> component does not support the focusable and disabled attributes.

Setting Styles

Set the style for the <menu> component, such as the font color, size, and character spacing.

Collapse
Word wrap
Dark theme
Copy code
  1. <!-- xxx.hml-->
  2. <div class="container">
  3.   <text class="title-text" id="textId">show menu</text>
  4.   <menu target="textId" type="click" title="title">
  5.     <option value="Item 1">Item 1</option>
  6.     <option value="Item 2">Item 2</option>
  7.     <option value="Item 3">Item 3</option>
  8.   </menu>
  9. </div>
Collapse
Word wrap
Dark theme
Copy code
  1. /* xxx.css */
  2. .container{
  3.   width: 100%;
  4.   height: 100%;
  5.   flex-direction: column;
  6.   background-color: #F1F3F5;
  7.   align-items: center;
  8.   justify-content: center;
  9.   width: 100%;
  10. }
  11. .title-text{
  12.   font-size: 35px;
  13.   background-color: #5a5aee;
  14.   color: white;
  15.   width: 70%;
  16.   text-align: center;
  17.   height: 85px;
  18.   border-radius: 12px;
  19. }
  20. .menu{
  21.   text-color: blue;
  22.   font-size: 35px;
  23.   letter-spacing: 2px;
  24. }
  25. option{
  26.   color: #6a6aef;
  27.   font-size: 30px;
  28. }

Binding Events

Bind the oncancel event to the <menu> component. (The event is triggered when an operation is canceled.)

Collapse
Word wrap
Dark theme
Copy code
  1. <!-- xxx.hml-->
  2. <div class="container">
  3.   <text  class="title-text" id="textId" onclick="textClick">show menu</text>
  4.   <menu  title="title" oncancel="cancel" id="menuId">
  5.     <option value="Item 1">Item 1</option>
  6.     <option value="Item 2">Item 2</option>
  7.     <option value="Item 3">Item 3</option>
  8.   </menu>
  9. </div>
Collapse
Word wrap
Dark theme
Copy code
  1. /* xxx.css */
  2. .container{
  3.   width: 100%;
  4.   height: 100%;
  5.   flex-direction: column;
  6.   background-color: #F1F3F5;
  7.   width: 100%;
  8. }
  9. .title-text{
  10.   font-size: 35px;
  11.   background-color: #5a5aee;
  12.   color: white;
  13.   width: 70%;
  14.   text-align: center;
  15.   height: 85px;
  16.   border-radius: 12px;
  17.   margin-top: 500px;
  18.   margin-left: 15%;
  19. }
  20. menu{
  21.   text-color: blue;
  22.   font-size: 35px;
  23.   letter-spacing: 2px;
  24. }
  25. option{
  26.   color: #6a6aef;
  27.   font-size: 30px;
  28. }
Collapse
Word wrap
Dark theme
Copy code
  1. // xxx.js
  2. export default {
  3.   cancel() {
  4.     this.getUIContext().getPromptAction().showToast({
  5.       message: "cancel"
  6.     })
  7.   },
  8.   textClick() {
  9.     this.$element("menuId").show({ x: 175,y: 590 });
  10.   }
  11. }

English
©2026 HUAWEI Developers. All rights reserved.
Terms of Use
Statement About HUAWEI Developers and Privacy
Cookies
Cookie Settings
Open-Source Software Notice