Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

HamburgerMenu Class

Represents a collapsible navigation menu that displays a stack of navigation buttons. Supports regular buttons, sub-menus, hyperlinks, check and radio buttons.

Namespace: DevExpress.Xpf.WindowsUI

Assembly: DevExpress.Xpf.Controls.v24.1.dll

NuGet Package: DevExpress.Wpf.Controls

#Declaration

public class HamburgerMenu :
    ContentControl,
    ISupportSelection,
    INavigationOwner,
    IHamburgerMenu

#Remarks

The image below shows the main menu, the bottom bar, and buttons of the Hamburger Menu.

Hamburger Menu Items

The XAML snippet below illustrates how to define ThemedWindow that uses a Hamburger Menu for navigation.

<dx:ThemedWindow x:Class="DXApplication1.MainWindow"
                 xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui"
                 xmlns:dxwuin="http://schemas.devexpress.com/winfx/2008/xaml/windowsui/navigation"
                 xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
                 xmlns:local="clr-namespace:DXApplication1"
                 mc:Ignorable="d"
                 Title="MainWindow">
    <dxwui:HamburgerMenu OpenPaneWidth="200"
                         SelectedItem="{Binding HamburgerMenuSelectedItem, Mode=TwoWay}"
                         NavigationTarget="{Binding ElementName=service}">
        <dxwui:HamburgerMenu.Content>
            <dxwui:NavigationFrame Source="{x:Type local:Home}">
                <dxmvvm:Interaction.Behaviors>
                    <dxwuin:FrameNavigationService x:Name="service"/>
                </dxmvvm:Interaction.Behaviors>
            </dxwui:NavigationFrame>
        </dxwui:HamburgerMenu.Content>
        <dxwui:HamburgerMenuNavigationButton Glyph="Icons/Home.png" Content="Home" NavigationTargetType="{x:Type local:Home}"/>
        <dxwui:HamburgerMenuItemSeparator/>
        <dxwui:HamburgerSubMenu Content="Menu" Glyph="Icons/Menu.png">
            <dxwui:HamburgerSubMenu.Items>
                <dxwui:HamburgerSubMenuNavigationButton Content="MenuSubItem 1" PreviewContent="PreviewItem 1" ShowInPreview="True" SelectOnClick="False" RightContent="RC"/>
                <dxwui:HamburgerSubMenuNavigationButton Content="MenuSubItem 2" PreviewContent="PreviewItem 2" ShowInPreview="True" SelectOnClick="False"/>
                <dxwui:HamburgerSubMenuNavigationButton Content="MenuSubItem 3"/>
                <dxwui:HamburgerSubMenuNavigationButton Content="MenuSubItem 4" ShowPreviewMark="True"/>
            </dxwui:HamburgerSubMenu.Items>
        </dxwui:HamburgerSubMenu>
        <dxwui:HamburgerMenuHyperlinkButton NavigateUri="https://www.devexpress.com/" Content="More information..." Placement="Bottom"/>
        <dxwui:HamburgerMenuNavigationButton NavigationTargetType="{x:Type local:About}" Content="About" Placement="Bottom" Glyph="Icons/About.png"/>
        <dxwui:HamburgerMenu.BottomBarItems>
            <dxwui:HamburgerMenuBottomBarNavigationButton NavigationTargetType="{x:Type local:Settings}" Glyph="Icons/Settings.png" Placement="Right"/>
            <dxwui:HamburgerMenuBottomBarRadioButton GroupName="Radio" Glyph="Icons/Radio1.png"/>
            <dxwui:HamburgerMenuBottomBarRadioButton GroupName="Radio" Glyph="Icons/Radio2.png"/>
            <dxwui:HamburgerMenuBottomBarCheckBox Glyph="Icons/Check.png"/>
        </dxwui:HamburgerMenu.BottomBarItems>
    </dxwui:HamburgerMenu>
</dx:ThemedWindow>

Use the navigation button’s NavigationTargetType (or NavigationTargetTypeName) property to specify the Page class to be opened when a user clicks the menu item. The NavigationTargetParameter property specifies the navigation parameter to pass to the target page.

The HamburgerMenu is a container that stores the default NavigationFrame. If you want to use the HamburgerMenu with another control, place this control inside the HamburgerMenu.Content property:

<dxwui:HamburgerMenu>
    <dxwui:HamburgerMenu.Content>
        <dxg:GridControl>
            <!-- ... -->
        </dxg:GridControl>
    </dxwui:HamburgerMenu.Content>

    <dxwui:HamburgerMenuNavigationButton .../>
    <!-- ... -->
</dxwui:HamburgerMenu>

Refer to the following help topic for more information: Hamburger Menu.

The following code snippet (auto-collected from DevExpress Examples) contains a reference to the HamburgerMenu class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

See Also