Time to Boost Your HamburgerMenu! Multi-Level Items Have Arrived

The new version of Telerik UI for WPF's HamburgerMenu recipe is here. The RadNavigationView now supports UWP-like multi-levels! Learn how to achieve a hierarchical menu.

Remember how I deliberately let the secret about mastering the navigation within your WPF apps just slip? I did not hesitate a minute to share with you the recipe of our HamburgerMenu. But you know what—I like making my favorite recipes taste better every time. That’s why I’m so thrilled to announce the new stuffing of this one. Let me introduce you to the multi-level hierarchy support of RadNavigationView!

Since the R1 2019 Release, when the first version of the HamburgerMenu recipe was created, a lot of requests and feedback was received. I am so grateful for that. Thanks to all of you, looking for multi-level items (like in UWP), the RadNavigationView control now supports it! Let me show you how to achieve hierarchical menu visualization.

Setting Up Hierarchy

Each RadNavigationViewItem element now has an Items collection. It can be populated with numerous RadNavigationViewItem elements, thus allowing multilevel items definition. XAML lovers, check it out below:

<telerik:RadNavigationView PaneHeader="Mail"> 

    <telerik:RadNavigationView.Items> 

        <telerik:RadNavigationViewItem Content="Accounts"> 

            <telerik:RadNavigationViewItem.Items>

                <telerik:RadNavigationViewItem Content="Viktoria Grozdancheva (vgrozdancheva@prgs.com)" /> 

                <telerik:RadNavigationViewItem Content="John Doe (jdoe@prgs.com)" />                        

            </telerik:RadNavigationViewItem.Items> 

        </telerik:RadNavigationViewItem> 

        <telerik:RadNavigationViewItem Content="Folders"> 

            <telerik:RadNavigationViewItem.Items> 

                <telerik:RadNavigationViewItem Content="Inbox"/> 

                <telerik:RadNavigationViewItem Content="Drafts"/> 

                <telerik:RadNavigationViewItem Content="Sent Items"/> 

                <telerik:RadNavigationViewItem Content="Deleted Items"/> 

            </telerik:RadNavigationViewItem.Items> 

        </telerik:RadNavigationViewItem>              

    </telerik:RadNavigationView.Items> 

</telerik:RadNavigationView>

Data Binding lovers, don’t you be worried. The HamburgerMenu can also be populated with business objects via its ItemsSource property. The DisplayMemberPath and ItemContainerStyle properties can be used to further customize the items and allow sub-items. Check the Hierarchical Data Binding article of the control for more information and examples.

So much talking and not a single preview of the menu’s multi-levels in action… Shame on me.

P.S. This awesome GIF is not a preview of the first code snippet, it’s from our precious Telerik UI for WPF Controls Demo application. Don’t hesitate to check it out and play with the Sub Items demo of the NavigationView control.

Oh, one thing that's worth noticing about the GIF is that when I click directly on the expand/collapse icon, the item does not get selected—this way only the expanded or collapsed state is triggered. Clicking everywhere else in the bounds of the item will trigger its selected state. Thought you might want to know it 😇.

Customization Capabilities

The NavigationView sub-items are totally tailor-made to meet your business needs. Let’s peek at the benefits of the hierarchical hamburger menu together.

Expand/Collapse Icons

First thing that I’d like to be in control of are the expand and collapse icons, of course. For this purpose, the ExpandedIcon and CollapsedIcon properties of the RadNavigationViewItem come in handy. The default icon template of the item uses RadGlyph, so you can set the properties to a glyph string from the glyphs reference sheet. My favorite cheat-sheet. 😝

Oh, you can also experiment with the expand/collapse animations if you dare!

Nested Items Indentation

All child items can have a different than the default horizontal offset (indent). Simply set the SubItemsIndentation property of RadNavigationView to the desired value and you’re all done. You can play with this one using the Configurator part of the Sub Items demo that I mentioned a few lines above.

Single/Multiple Expanded Items

The default behavior of the RadNavigationView allows expanding multiple RadNavigationViewItem elements with child items at once. Need to restrict that to only a single expanded item at a time? Sure, just set the AllowMultipleExpandedItems property of RadNavigationView to False.

Flying Out to NavigationView’s Flyout

What about having a collapsed pane and the NavigationView is in its Compact or Expanded DisplayMode? Where do all nested menu items go? 🤔

That’s right, they fly out to the east coast of the pane 😊. Now, seriously, clicking on a parent item displays its children (the collapsed RadNavigationViewItems) in a flyout which has a nice animation by the way to make sure the flight is smooth.

Some of you asked for direct access to the sub-items on hovering over a main menu entry. This can be achieved by changing the default ClickMode of the parent item to Hover. Easy-peasy.

Sub-Items Events

A few words about the events that are fired when expanding and collapsing the items. These actions fire the ItemExpanded and ItemCollapsed events of RadNavigationView. Additionally, the RadNavigationViewItem exposes Expanded and Collapsed events, which are fired before the previous two.

Closing Words

You know I’m only human and might have missed something which you consider important. Therefore, don’t forget to check out the Hierarchy and Hierarchical Data Binding articles of the NavigationView as well.

Okay, that’s it, guys. Thanks for taking your time to read my blog! I hope the multi-level hierarchy support of the HamburgerMenu met your expectations and you’re eager to:

Get the Latest Telerik UI for WPF

I’m sure you’ll try it out. And when you do, I’ll be there to read your honest feedback. Don’t be shy to share it in the comment section below or head to our Feedback portal.

Happy coding and to make it even happier, explore all new controls, features and improvements of the R2 2020 release of Telerik UI for WPF.