Is there a simple way to have a hierarchical menu in dotnet MAUI?

Question

Is there a way to have a traditional hierarchical menu in dotnet MAUI, so when the user clicks on one menu item a submenu appears, or should I completely rethink the navigation? Note that the application is really just for Windows and Mac, though it might be usable on tablets - certainly not phones. The XAML I have tried (with dummy backing methods in the code behind) is:

<ShellContent
    Title="Arguments"
    ContentTemplate="{DataTemplate local:ArgumentsPage}"
    Route="ArgumentsPage" />
<ShellContent
    Title="Architecture"
    ContentTemplate="{DataTemplate local:ArchitecturePage}"
    Route="ArchitecturePage"/>
<MenuFlyoutSubItem Text="File">
    <MenuFlyoutItem Text="New" Clicked="OnFileNewClicked"/>
    <MenuFlyoutItem Text="Open" Clicked="OnFileOpenClicked"/>
    <MenuFlyoutItem Text="Save" Clicked="OnFileSaveClicked" />
</MenuFlyoutSubItem>
<MenuFlyoutItem Text="Module" />
<MenuFlyoutItem Text="Settings" />

The top level menu items appear, but when I click "File" I don't get the "New", "Open" and "Save".

Thanks.

Answer 1

You can add this code to your .xaml:

<!-- in AppShell.xaml -->
<Shell.MenuBarItems>
        <MenuBarItem Text="File">
            <MenuFlyoutItem Text="New" Clicked="OnFileNewClicked"/>
            <MenuFlyoutItem Text="Open" Clicked="OnFileOpenClicked"/>
            <MenuFlyoutItem Text="Save" Clicked="OnFileSaveClicked" />
        </MenuBarItem>
        <MenuBarItem Text="Module" />
        <MenuBarItem Text="Settings" />
</Shell.MenuBarItems>

<!-- or in Page.xaml -->
<ContentPage.MenuBarItems>
        <MenuBarItem Text="File">
            <MenuFlyoutItem Text="New" Clicked="OnFileNewClicked"/>
            <MenuFlyoutItem Text="Open" Clicked="OnFileOpenClicked"/>
            <MenuFlyoutItem Text="Save" Clicked="OnFileSaveClicked" />
        </MenuBarItem>
        <MenuBarItem Text="Module" />
        <MenuBarItem Text="Settings" />
</ContentPage.MenuBarItems>

Remember not to add Shell.NavBarIsVisible="False". This is the effect.