WPF Navigation Drawer Control | Sidebar Menu

WPF Navigation Drawer (Sidebar) control

The sidebar menu provides modern UI navigation for applications.

Compact and extended display modes fit the content based on the available size of the window.

Built-in navigation menu items: tab, button, header, multi-level hierarchy, and footer.

FREE TRIAL

VIEW DEMOS

.NET 7.0 support now available

Overview

The WPF Navigation Drawer control is a sidebar navigation view that is used to create a navigation menu. It provides compact and extended display modes with built-in navigation view items. Switch between modes based on the available size of the window. It also provides a default mode that allows a custom pane view.

WPF NavigationDrawer Getting Started documentation

Using the compact and extended display modes, create a navigation menu with built-in items. Footer items can also be populated using the built-in items. The drawer menu can be expanded and collapsed using the built-in toggle button.

WPF NavigationDrawer Display Modes documentation

WPF Navigation Drawer with Compact Mode

The sliding panel of the WPF Navigation Drawer can be loaded with navigation items such as tabs, a header, separators, and buttons.

WPF Navigation Drawer with Auto Display Mode

Adaptive display modes

The WPF Navigation Drawer menu can automatically switch between the compact and extended modes based on the available size of the window.

WPF Navigation Drawer with Hierarchy

The sidebar menu of the Navigation Drawer can be loaded with multiple levels by choosing the tab navigation item. This will be useful to organize and prioritize a list of multiple items.

WPF NavigationDrawer with Expand Mode

Toggle button

The WPF Navigation Drawer has a built-in toggle button placed at the top-left corner that can be used to toggle the sidebar menu between compact and extended modes.

Custom views

The default display mode allows you to load any custom view for the header, menu content, and footer. The drawer menu will be completely hidden in this display mode.

WPF NavigationDrawer Custom Views documentation

Changing Position of WPF Navigation Drawer on Left Side

Load the view for the header part of the side drawer pane.

Drawer content view

Load the view for the body part of the side drawer pane.

Load the view for the footer part of the side drawer pane.

Slider positions

Customize the position of the drawer. The drawer can be placed at the left, right, top, and bottom.

Changing Position of WPF Navigation Drawer on Right Side

Easily get started with the WPF Navigation Drawer using a few simple lines of XAML or C# code example as demonstrated below. Also explore the WPF Navigation Drawer example that shows how to render and configure the Navigation Drawer in WPF.

xaml
c#
<syncfusion:SfNavigationDrawer>
            <syncfusion:SfNavigationDrawer.ContentView>
               <Label
                Width="150"
                Height="30"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Content="Content View" />
           </syncfusion:SfNavigationDrawer.ContentView>
</syncfusion:SfNavigationDrawer>
public MainWindow()
{
InitializeComponent();
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
Label label = new Label();
label.Content = "Content View";
label.HorizontalAlignment = HorizontalAlignment.Center;
label.VerticalAlignment = VerticalAlignment.Center;
label.Height = 30;
label.Width = 150;
navigationDrawer.ContentView = label;
this.Content = navigationDrawer;
}

Frequently Asked Questions

✅ Why should you choose Syncfusion WPF Navigation Drawer?

The Syncfusion WPF Navigation Drawer provides the following:

A modern UI navigation through apps.
Navigation menu that can be placed on any side of the screen.
Compact and extended display modes with support to best fit the content based on the available size.
Built-in navigation menu items: tab, button, header, multi-level hierarchal, and footer items.
Custom views can also be added as the header and footer of the drawer.
One of the best WPF Navigation Drawer in the market that offers feature-rich UI to interact with the software.
Touch-friendly and responsive UI.
Simple configuration and API.
Extensive demos, documentation to learn quickly and get started with WPF Navigation Drawer.

✅ Where can I find the Syncfusion WPF Navigation Drawer demo?

You can find our WPF Navigation Drawer demo on

GitHub location.

App center location.

Microsoft location.

✅ Can I download and utilize the Syncfusion WPF Navigation Drawer for free?

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

✅ How do I get started with Syncfusion WPF Navigation Drawer?

A good place to start would be our comprehensive getting started documentation.

Rated by users across the globe

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

I work for an electrical instruments plant. I purchased the Gantt control from Syncfusion. It has saved me many hours as well as stores our information more efficiently… now.

Marco Del Frate,

Tecnel SRL

I am really thankful for the wonderful set of controls for WPF. I was able to deliver things on time and could focus on core business logic rather than control development.

Umair Ahmed,

Technical Lead at Vercom