[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Collapse]Navigation Controls
   [Collapse]Navigation Bar
     Save and Restore Layout
    [Expand]Member Tables
     NavBarControl to AccordionControl Converter
   [Expand]Accordion Control
    Navigation Frame and Tab Pane
    Navigation Pane
    Tile Bar
   [Expand]Tile Nav Pane
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Expand]Tile Control
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)


A Navigation Bar View determines the way the control and its child elements look and behave.

Expanded Explorer Bar View

The default Navigation Bar View.

Demo Center 19.2: Run a demo

Key features:

Expanded Side Bar View

Emulates the old-styled side bar similar to the one that was in Microsoft Outlook prior to version 2003.

Key features:

  • only one Navigation Bar group can be expanded at a time;
  • an expanded group fills the entire control space, which is not occupied with headers of other (inactive) groups;
  • supports interior scroll buttons to scroll the content of an expanded group.

Expanded Navigation Pane View

An advanced View inspired by Microsoft Outlook's navigation pane.

Demo Center 19.2: Run a demo

On touch devices, the Navigation Pane View does not support group content scrolling using swipe gestures. Group content can be scrolled by tapping the scroll buttons or dragging this content.

Expanded Navigation Pane View: Layout

In Navigation Pane View, the Navigation Bar consists of four zones.

Expanded Navigation Pane View: Collapsed State

End-users can click the expand/collapse button in the NavBar header area to minimize the control. To do the same in code, modify the OptionsNavPane.NavPaneState property.

  • Header Area

    Displays only the expand/collapse button.

  • Active Group Area

    Displays a button that invokes the resizable panel that shows the content of a currently active group. A group caption is rotated vertically.

    Settings: OptionsNavPane.PopupFormSize | OptionsNavPane.MaxPopupFormWidth

  • Inactive Group Area

    Buttons that activate groups upon clicking display only group icons.

  • Overflow Panel

    Displays only the ellipsis button.

Expanded Navigation Pane View: Customization Menu

The ellipsis button in the overflow panel area allows end-users to change the number of items shown in the inactive group area, activate hidden groups and (if the OptionsNavPane.AllowOptionsMenuItem property is enabled) customize the group order and font settings.

Expanded Navigation Pane View: Integration with the Office Navigation Bar Control

The Office Navigation Bar control can replace the inactive group and overflow panel areas of a Navigation Pane. See this link to learn more.

Expanded Change a Navigation Bar View

To change a Navigation Bar View, modify the NavBarControl.PaintStyleKind property. At design time, this property is accessible through the control's smart tag.

Expanded Change a Navigation Bar View by Selecting a Template

An alternative approach to changing the Navigation Bar View is to modify the NavBarControl.PaintStyleName property to apply a specific template. A template changes the View and applies a specific paint style to a control ignoring the look&feel settings.

View Type

Related Templates

Explorer Bar

  • ExplorerBarView
  • UltraFlatExplorerBarView
  • XPExplorerBarView
  • AdvXPExplorerBarView
  • Templates, whose names start with the "Skin:" prefix ("Skin:Blue", "Skin:Money Twins", etc.)

Side Bar

  • BaseView
  • FlatView
  • Office1View
  • Office2View
  • Office3View
  • VSToolBoxView
  • XP1View
  • XP2View

Navigation Pane

  • NavigationPane
  • SkinNavigationPane (this template is affected by the UserLookAndFeel.SkinName property of a Navigation Bar)
  • Templates, whose names start with the "SkinNav:" prefix ("SkinNav:Blue" , "SkinNav:Money Twins", etc.)

The NavBarControl.PaintStyleName property has a priority over the NavBarControl.PaintStyleKind setting.

Expanded See Also

Is this topic helpful?​​​​​​​