Skip to main content

NavBarControl Class

A control that enables you to implement a sidebar menu or allow users to switch between application modules. Supports three layouts: Navigation Pane, Explorer Bar View, and Side Bar View.

Namespace: DevExpress.Xpf.NavBar

Assembly: DevExpress.Xpf.NavBar.v22.2.dll

NuGet Package: DevExpress.Wpf.NavBar


public class NavBarControl :

The following members return NavBarControl objects:



The NavBarControl was designed to replicate the layout of the navigation pane in Outlook 2003, Outlook 2007, and older versions of Microsoft Explorer.

If you start a new project, we recommend that you use the AccordionControl. The AccordionControl can also be used as a navigation pane, but it has a simpler API and includes more customization options.

Add a NavBarControl to your application to implement advanced navigation capabilities. This control allows you to display a number of items arranged into different groups. Groups can be expanded/collapsed in order to show/hide their contents. You can process item click events to perform the required actions.


With WPF templates supported throughout the DXNavBar, you can easily design custom interfaces to satisfy the most demanding users.

For detailed information on the key features introduced by the DXNavBar, see the following topics:

For code samples that demonstrate how to implement most popular tasks, see Examples.


This example demonstrates how the NavBarControl can be created and customized programmatically (in a code-behind file).In this sample, two groups are created within the NavBarControl: the first group contains three items; the second group's content is represented by a StackPanel holding two TextBlock controls. The second TextBlock displays the text of the selected item within the NavBarControl.The ItemSelecting event of the NavBarControl is handled to invoke a confirmation dialog allowing the selection of the first group's third item to be canceled.


View Example

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using DevExpress.Xpf.NavBar;

namespace CreateNavBarControlViaCode
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
        public Window1(){

        private void CreateNavBarControl() {
            NavBarControl navBar = new NavBarControl();
            //Add the NavBarControl to the control hierarchy
            DockPanel.SetDock(navBar, Dock.Left);


            navBar.View.ItemSelecting += new NavBarItemSelectingEventHandler(navBar_ItemSelecting);

        #region #Group_Item_Images
        private void CreateGroup1(NavBarControl navBar){
            NavBarGroup group1 = new NavBarGroup();
            group1.Header = "Items";
            //Display an image within the group's header
            group1.ImageSource = new BitmapImage(new Uri("pack://application:,,,/Images/folder.png"));

            NavBarItem item1 = new NavBarItem();
            item1.Content = "Home";

            NavBarItem item2 = new NavBarItem();
            item2.Content = "Work";

            NavBarItem item3 = new NavBarItem();
            item3.Content = "Private";
            //Display an image within the item
            item3.ImageSource = new BitmapImage(new Uri("pack://application:,,,/Images/private.png"));
            //Change item image layout
            Style itemStyle = new Style();
            itemStyle.Setters.Add(new Setter(NavBarViewBase.LayoutSettingsProperty, new LayoutSettings() { ImageDocking = Dock.Right }));
            item3.VisualStyle = itemStyle;

        #endregion #Group_Item_Images

        #region #Group_CustomContent
        private void CreateGroup2(NavBarControl navBar){
            NavBarGroup group2 = new NavBarGroup();
            group2.Header = "Custom Content";
            //Specify that the group's content should be defined via the Content property
            group2.DisplaySource = DisplaySource.Content;

            //Create a StackPanel and specify it as the group's content
            StackPanel stackPanel = new StackPanel() { Orientation = Orientation.Horizontal };
            group2.Content = stackPanel;

            //Define the panel's content by creating two text blocks
            stackPanel.Children.Add(new TextBlock() {Text = "Selected Item: "});

            TextBlock textBlock2 = new TextBlock();
            Binding textBlockTextBinding = new Binding("SelectedItem.Content");
            textBlockTextBinding.Source = navBar; //textBlockTextBinding.Source = navBar.Groups[0];
            //The second text block displays the text of the NavBarControl's selected item
            textBlock2.SetBinding(TextBlock.TextProperty, textBlockTextBinding);

        #endregion #Group_CustomContent

        #region #ItemSelecting_Event
        private void navBar_ItemSelecting(object sender, NavBarItemSelectingEventArgs e){
            if (e.NewItem.Content.ToString() == "Private"){
                MessageBoxResult result = MessageBox.Show("Are you sure to select the 'Private' item?", "Confirm Dialog", MessageBoxButton.YesNo);
                e.Cancel = (result == MessageBoxResult.No);
        #endregion #ItemSelecting_Event

The following code snippets (auto-collected from DevExpress Examples) contain references to the NavBarControl class.


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