Contents

menuOrder(_:)

Sets the preferred order of items for menus presented from this view.

Declaration

nonisolated func menuOrder(_ order: MenuOrder) -> some View

Parameters

  • order:

    The menu item ordering strategy to apply.

Mentioned in

Return Value

A view that uses the specified menu ordering strategy.

Discussion

Use this modifier to override the default menu order. On supported platforms, priority order keeps the first items closer to the user’s point of interaction, whereas fixed order always orders items from top to bottom.

On iOS, the automatic order resolves to fixed for menus presented within scrollable content. Pickers that use the menu style also default to fixed order. In all other cases, menus default to priority order.

On macOS, tvOS and watchOS, the automatic order always resolves to fixed order.

The following example creates a menu that presents its content in a fixed order from top to bottom:

Menu {
    Button("Select", action: selectFolders)
    Button("New Folder", action: createFolder)
    Picker("Appearance", selection: $appearance) {
        Label("Icons", systemImage: "square.grid.2x2").tag(Appearance.icons)
        Label("List", systemImage: "list.bullet").tag(Appearance.list)
    }
} label: {
    Label("Settings", systemImage: "ellipsis.circle")
}
.menuOrder(.fixed)

You can use this modifier on controls that present a menu. For example, the code below creates a Picker using the menu style with a priority-based order:

Picker("Flavor", selection: $selectedFlavor) {
    Text("Chocolate").tag(Flavor.chocolate)
    Text("Vanilla").tag(Flavor.vanilla)
    Text("Strawberry").tag(Flavor.strawberry)
}
.pickerStyle(.menu)
.menuOrder(.priority)

You can also use this modifier on context menus. The example below creates a context menu that presents its content in a fixed order:

Text("Favorite Card Suit")
    .padding()
    .contextMenu {
        Button("♥️ - Hearts", action: selectHearts)
        Button("♣️ - Clubs", action: selectClubs)
        Button("♠️ - Spades", action: selectSpades)
        Button("♦️ - Diamonds", action: selectDiamonds)
    }
    .menuOrder(.fixed)

The modifier has no effect when applied to a subsection or submenu of a menu.

See Also

Setting a preferred order