Main Menu

• Mar 03, 2023

The main section of the Hamburger Menu contains navigation commands that are represented by buttons with icons and captions.

To specify the collection of the main menu, use the HamburgerMenu.Items property or declare buttons between the Hamburger Menu‘s opening and closing tags in XAML. You can add the following buttons to the collection.

• HamburgerMenuNavigationButton - a regular button with a glyph and caption that navigates an end-user to the page specified with the button’s HamburgerMenuNavigationButtonBase<TOwner>.NavigationTargetType or HamburgerMenuNavigationButtonBase<TOwner>.NavigationTargetTypeName property;
• HamburgerSubMenu - a Sub Menu that is a flyout panel containing additional navigation items;
• HamburgerMenuHyperlinkButton - a hyperlink that invokes the default browser and navigates to the URI specified with the button’s NavigateUri property.

Use the Placement property to pin the button to the main menu’s top / bottom side.

To use the Hamburger Menu with another control, specify the control as the HamburgerMenu.Content property value:

XAML

<dxwui:HamburgerMenu >
    <dxwui:HamburgerSubMenu>
        <dxmvvm:Interaction.Behaviors>
            <dxwui:HamburgerSubMenuThemeSelectorBehavior ShowTouchThemes="False" PreviewThemeNames="VS2017Light,VS2017Dark,Office2019White,Office2019HighContrast"/>
        </dxmvvm:Interaction.Behaviors>
    </dxwui:HamburgerSubMenu>
    <dxwui:HamburgerMenu.Content>
        <dxdo:DockLayoutManager x:Name="dockManager">
            <dxdo:LayoutGroup x:Name="layoutRoot">
                ...
            </dxdo:LayoutGroup>
        </dxdo:DockLayoutManager>
    </dxwui:HamburgerMenu.Content>
</dxwui:HamburgerMenu>