Plugin.Maui.NativeContextMenus 1.1.0

Plugin.Maui.NativeContextMenus

Plugin.Maui.NativeContextMenus adds native menus to views and to toolbar items in a .NET MAUI app.

.NET MAUI has a context menu (FlyoutBase.ContextFlyout) only on Windows and Mac Catalyst. This plugin gives the same function on iOS and Android.

Menu Types

The plugin has two types of menu. The two types use the same MenuNode items.

Screenshots

These screenshots show the sample app. The same XAML makes the menus on the two platforms.

	Menu with sections	Submenu with a radio group	Menu on a list item	Menu on a tap
iOS
Android

Supported Platforms

On Windows, use the .NET MAUI context menu.

Supported .NET Versions

The package has assemblies for .NET 9 and .NET 10.

Installation

<PackageReference Include="Plugin.Maui.NativeContextMenus" Version="1.1.0" />

The menus do not need a registration call in MauiProgram.cs.

View Context Menus

Add the XML namespace to the page:

xmlns:cm="clr-namespace:Plugin.Maui.NativeContextMenus;assembly=Plugin.Maui.NativeContextMenus"

Set the NativeContextMenus.ContextMenu attached property on a view:

<Border>
    <Label Text="Long press this card" />

    <cm:NativeContextMenus.ContextMenu>
        <cm:NativeContextMenu Title="Card">
            <cm:MenuNode Title="Copy" SystemIcon="Copy" Command="{Binding CopyCommand}" />
            <cm:MenuNode Title="Share" SystemIcon="Share" Command="{Binding ShareCommand}" />

            
            <cm:MenuNode>
                <cm:MenuNode Title="Favorite" IsCheckable="True" IsChecked="{Binding IsFavorite, Mode=TwoWay}" />

                
                <cm:MenuNode Title="Sort By">
                    <cm:MenuNode Title="Name" GroupKey="sort" IsCheckable="True" IsChecked="True" />
                    <cm:MenuNode Title="Date" GroupKey="sort" IsCheckable="True" />
                </cm:MenuNode>
            </cm:MenuNode>

            <cm:MenuNode Title="Delete" SystemIcon="Delete" Destructive="True" Command="{Binding DeleteCommand}" />
        </cm:NativeContextMenu>
    </cm:NativeContextMenus.ContextMenu>
</Border>

The menu gets the BindingContext of the view. Thus bindings in a MenuNode work the same as bindings in the view.

List items

In an item template, the BindingContext is the item. Use a RelativeSource binding to get a command from the page view model. Send the item as the parameter.

<CollectionView ItemsSource="{Binding Machines}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="12">
                <Label Text="{Binding Name}" />

                <cm:NativeContextMenus.ContextMenu>
                    <cm:NativeContextMenu>
                        <cm:MenuNode Title="Remove"
                                     Destructive="True"
                                     Command="{Binding RemoveCommand, Source={RelativeSource AncestorType={x:Type local:MachinesViewModel}}}"
                                     CommandParameter="{Binding .}" />
                    </cm:NativeContextMenu>
                </cm:NativeContextMenus.ContextMenu>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Open the menu on a tap

Set Trigger to Tap. The default is LongPress.

<cm:NativeContextMenu Trigger="Tap">
    <cm:MenuNode Title="Open" SystemIcon="Open" Command="{Binding OpenCommand}" />
</cm:NativeContextMenu>

On iOS, a menu that opens on a tap does not show the preview of the view.

Open the menu from code

Give the menu a name and call Show. This works with the two triggers.

<cm:NativeContextMenu x:Name="CardMenu">

CardMenu.Show();

NativeContextMenus.Show(view) opens the menu of a view.

C#

var menu = new NativeContextMenu();
menu.Items.Add(new MenuNode { Title = "Copy", Command = copyCommand });
menu.Items.Add(new MenuNode { Title = "Delete", Destructive = true, Command = deleteCommand });

NativeContextMenus.SetContextMenu(label, menu);

Set the property to null to remove the menu.

API

NativeContextMenu

MenuNode

A node with Children and a Title is a submenu. A node with Children and no Title is an inline section.

The plugin builds the native menu each time the menu opens. As a result, the menu always shows the current property values.

Icons

SystemIcon is the easiest way to set an icon. It is an enum, thus the editor shows the values (Copy, Share, Delete, Edit, and more).

<cm:MenuNode Title="Delete" SystemIcon="Delete" />

To use an icon of your own, set Icon. It has priority over SystemIcon on all platforms. To show no icon, do not set an icon property.

Android shows menu icons on API 29 or later.

Known Limits

• Android shows a PopupMenu. It does not show the lifted preview of the view that iOS shows.
• On Android, the plugin sets the long click listener of the platform view (the click listener when Trigger is Tap). A view cannot have a different listener of that type at the same time.
• On iOS, the plugin adds a clear button to the platform view. The button gets touches only when Trigger is Tap.
• The menu of a parent view does not open from a child view that handles touch input itself (for example a Button).

Toolbar Menus

NativeContextMenuToolbarItem is a ToolbarItem that opens a native menu on a tap. Add MenuNode items to it the same as for a context menu.

<ContentPage.ToolbarItems>
    <cm:NativeContextMenuToolbarItem Text="Filter">
        <cm:MenuNode Title="Sort By">
            <cm:MenuNode Title="Name" GroupKey="sort" IsCheckable="True" IsChecked="True"
                         Command="{Binding SortCommand}" CommandParameter="Name" />
            <cm:MenuNode Title="Date" GroupKey="sort" IsCheckable="True"
                         Command="{Binding SortCommand}" CommandParameter="Date" />
        </cm:MenuNode>

        <cm:MenuNode Title="Show Favorites" IsCheckable="True" IsChecked="{Binding ShowFavorites, Mode=TwoWay}" />
    </cm:NativeContextMenuToolbarItem>
</ContentPage.ToolbarItems>

The toolbar item does not need a registration call or platform code. The nodes get the BindingContext of the page.

NativeContextMenuToolbarItem

The item has all the members of ToolbarItem (Text, IconImageSource, IsEnabled, and more) and these members:

The plugin builds the native menu each time the menu opens. As a result, the menu always shows the current property values.

Toolbar menu limits

• Do not use the Command property or the Clicked event of the toolbar item. Use the commands of the nodes.
• Use the default Order. An item with Order="Secondary" is in the overflow menu, and its menu opens at the end of the toolbar.
• On Android, the plugin finds the toolbar button by its Text. Give each toolbar item a different Text.
• On iOS and Mac Catalyst, the plugin finds the bar button by its AutomationId. If the item has no AutomationId, the plugin sets one.

Sample App

The sample app has a page for the view context menu and a page for the toolbar menu.

License

MIT. Refer to LICENSE.

The Android icons are from Material Symbols (Apache License 2.0). Refer to THIRD-PARTY-NOTICES.md.