@Entry
@Component
struct MainView {
  build() {
    Row() {
      Button('Show Menu')
        .bindMenu([
          {
            value: 'Option1',
            action: () => {
              console.info('Option1 selected')
            }
          }
        ])
    }
    .margin(20)
    .height('100%')
  }
}

Creating Custom Menu Components

While default menus provide basic functionality, they often don't meet the specific requirements of most applications. Creating custom-styled manus allows for better integration with your app's design language and user experience.

@Entry
@Component
struct MainView {
  @State isSelected: boolean = true
  private menuIcon: ResourceStr = $r("app.media.app_icon")
  private secondaryIcon: ResourceStr = $r("app.media.app_icon")
  
  @Builder
  SubMenu() {
    Menu() {
      MenuItem({ content: "Copy", labelInfo: "Ctrl+C" })
      MenuItem({ content: "Paste", labelInfo: "Ctrl+V" })
    }
  }

  @Builder
  CustomMenu(){
    Menu() {
      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu Item" })
      MenuItem({ startIcon: $r("app.media.icon"), content: "Menu Item" }).enabled(false)
      MenuItem({
        startIcon: this.menuIcon,
        content: "Menu Item",
        endIcon: $r("app.media.app_icon"),
        // When builder parameter is set, it indicates a submenu is bound to this menu item
        builder: this.SubMenu.bind(this),
      })
      MenuItemGroup({ header: 'Section Header' }) {
        MenuItem({ content: "Menu Item" })
          .selectIcon(true)
          .selected(this.isSelected)
          .onChange((selected) => {
            console.info("Menu item selection changed: " + selected);
            this.secondaryIcon = $r("app.media.icon");
          })
        MenuItem({
          startIcon: $r("app.media.app_icon"),
          content: "Menu Item",
          endIcon: $r("app.media.app_icon"),
          builder: this.SubMenu.bind(this)
        })
      }
      MenuItem({
        startIcon: this.secondaryIcon,
        content: "Menu Item",
        endIcon: $r("app.media.app_icon")
      })
    }
  }

  build() {
    Row() {
      Button('Show Menu')
        .bindMenu(this.CustomMenu)
    }
    .margin(20)
    .height('100%')
  }
}

The custom menu implementation demonstrates several key features of ArkUI's menu system. You can add icons, disable items, create submenu structures, group related items, and handle selection states. The MenuItemGroup component allows for logical organization of menu options with headers, while the builder parameter enables nested menu structures.

When implementing menus in your HarmonyOS application, consider the user experience and ensure that menu options are clearly labeled and logically organized. The ability to customize appearance and behavior makes ArkUI menus flexible anough to meet various design requirements while maintaining consistency with the operating system's interaction patterns.