Menu

Note:

Currently in the beta phase.

A menu displayed in a vertical list format.

Note:

The Menu component must be used in conjunction with the bindMenu or bindContextMenu methods and cannot be used as a standalone component.

Import Module

import ohos.arkui.component.menu

Child Components

Includes MenuItem and MenuItemGroup child components.

Creating the Component

init(() -> Unit)

public init(child!: () -> Unit = {=>})

Function: Creates a menu with child components.

Note:

Menu and menu item width calculation rules:
During layout, it is expected that each menu item has the same width. If a child component sets a width, it follows the size calculation rules.
When width is not set: The menu component will set a default width of 2 grid units for child components MenuItem and MenuItemGroup. If the content area of a menu item is wider than 2 grid units, it will adaptively expand.
When width is set: The menu component will set a fixed width for child components MenuItem and MenuItemGroup after subtracting padding.
When setting the width of the Menu border, the minimum supported width is 64vp.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Initial Version: 22

Parameters:

Parameter	Type	Required	Default	Description
child	() -> Unit	No	{=>}	Named parameter. Declares the child components within the container.

Universal Attributes/Events

Universal Attributes: All supported except shadow.

Universal Events: All supported.

Component Attributes

func font(?Length, ?FontWeight, ?ResourceStr, ?FontStyle)

public func font(
    size!: ?Length = None,
    weight!: ?FontWeight = None,
    family!: ?ResourceStr = None,
    style!: ?FontStyle = None
): This

Function: Sets the text size for all text within the Menu.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Initial Version: 22

Parameters:

Parameter	Type	Required	Default	Description
size	?Length	No	None	Named parameter. Sets the text size. When Length is Int64 or Float64, the unit is fp. Percentage settings are not supported. Default: 16.vp.
weight	?FontWeight	No	None	Named parameter. Sets the font weight of the text. Default: FontWeight.Normal.
family	?ResourceStr	No	None	Named parameter. Sets the font list for the text. Multiple fonts can be specified, separated by commas, with priority in order. Example: 'Arial, HarmonyOS Sans'. Currently supports 'HarmonyOS Sans' font and registered custom fonts. Default: "HarmonyOS Sans".
style	?FontStyle	No	None	Named parameter. Sets the font style of the text. Default: FontStyle.Normal.

func fontColor(?ResourceColor)

public func fontColor(value: ?ResourceColor): This

Function: Uniformly sets the color for all text within the Menu.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Initial Version: 22

Parameters:

Parameter	Type	Required	Default	Description
value	?ResourceColor	Yes	-	The color for all text within the Menu. Default: 0x99000000.

func radius(?BorderRadiuses)

public func radius(value: ?BorderRadiuses): This

Function: Sets the border radius of the Menu.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Initial Version: 22

Parameters:

Parameter	Type	Required	Default	Description
value	?BorderRadiuses	Yes	-	The border radius of the Menu.

func radius(?Length)

public func radius(value: ?Length): This

Function: Sets the border radius of the Menu.

Note:

If the sum of the two horizontal border radii exceeds the menu width, or the sum of the two vertical border radii exceeds the menu height, the menu will use the default border radius values for all four corners.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Initial Version: 22

Parameters:

Parameter	Type	Required	Default	Description
value	?Length	Yes	-	The border radius of the Menu.

Example Code

This example demonstrates a multi-level menu by configuring the builder parameter in MenuItem.

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*
import ohos.i18n.*
import ohos.resource_manager.*
import ohos.resource.*

@Entry
@Component
class EntryView {
    @State
    var select: Bool = true
    let iconStr: AppResource = @r(app.media.startIcon)
    var iconStr2: AppResource = @r(app.media.right)

    @Builder
    func SubMenu() {
        Menu() {
            MenuItem(startIcon: "", content: "Copy", endIcon: "", labelInfo: "Ctrl+C")
            MenuItem(startIcon: "", content: "Paste", endIcon: "", labelInfo: "Ctrl+V")
        }
    }

    @Builder
    func MyMenu() {
        Menu() {
            MenuItem(startIcon: @r(app.media.startIcon), content: @r(app.string.contentName),
                endIcon: @r(app.media.blank), labelInfo: @r(app.string.emptyName))
            MenuItem(startIcon: @r(app.media.startIcon), content: @r(app.string.contentName),
                endIcon: @r(app.media.blank), labelInfo: @r(app.string.emptyName)).enabled(false)
            MenuItem(
                startIcon: this.iconStr,
                content: @r(app.string.contentName),
                endIcon: this.iconStr,
                labelInfo: @r(app.string.emptyName),
                builder: this.SubMenu
            )
            MenuItemGroup(header: "Subtitle", footer: "") {
                =>
                MenuItem(
                    startIcon: this.iconStr,
                    content: @r(app.string.contentName),
                    endIcon: @r(app.string.emptyName),
                    labelInfo: @r(app.string.emptyName),
                    builder: this.SubMenu
                    )
                MenuItem(
                    startIcon: @r(app.media.startIcon),
                    content: @r(app.string.contentName),
                    endIcon: @r(app.media.right),
                    labelInfo: @r(app.string.emptyName),
                    builder: this.SubMenu
                )
                MenuItem(
                startIcon: "",
                content: "Menu Option",
                endIcon: "",
                labelInfo: "",
                ).selectIcon(true).selected(
                    select).onChange({
                    selected => iconStr2 = @r(app.media.foreground)
                })
            }

        }
    }

    func build() {
        Row() {
            Column() {
                Text("click to show menu")
                    .fontSize(50)
                    .fontWeight(FontWeight.Bold)
            }.bindMenu(builder: this.MyMenu).width(50.percent)
        }.height(100.percent)
    }
}