[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
   [Expand]Navigation Bar
   [Expand]Accordion Control
    Navigation Frame and Tab Pane
    Navigation Pane
    Tile Bar
   [Expand]Tile Nav Pane
    WindowsUI Button Panel
   [Collapse]Office Navigation Bar
     Interaction with 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)

Interaction with Navigation Bar

Office Navigation Bar was originally designed to be used in conjunction with a Navigation Bar control. These controls can be used together in two scenarios:

  1. the Office Navigation Bar serves as a bottom navigation panel for the Navigation Bar;
  2. the Office Navigation Bar replaces specific Navigation Bar Groups (or all of them) when in collapsed state.

This article provides information on both of these scenarios.

Expanded Bottom Navigation Panel

When used as a bottom navigation panel for a Navigation Bar, the Office Navigation Bar is populated automatically. In turn, the Navigation Bar (in its Navigation Pane View) loses all visual elements except for the currently active NavBarGroup and the expand/collapse button. Selecting Office Navigation Bar items activates corresponding Navigation Bar groups. The animation below illustrates this interaction. Transition effects captured in this animation relate to the Navigation Frame that switches its pages upon clicking Office Navigation Bar items.

To combine these two controls, follow the steps below.

  1. Switch the Navigation Bar to the Navigation Pane (recommended) or Side Bar View. The Explorer Bar View cannot communicate with an Office Navigation Bar.
  2. Populate the Navigation Bar with groups and items.
  3. Remove existing Office Navigation Bar items and check the OfficeNavigationBar.Orientation property value to make sure the control is oriented horizontally.
  4. Assign your Navigation Bar to the OfficeNavigationBar.NavigationClient property. Refer to this link to learn how the Office Navigation Bar retrieves Navigation Bar groups and creates related items.
  5. Optionally, set the OfficeNavigationBar.Compact property to true. In compact mode, the Office Navigation Bar will be docked to the Navigation Bar's bottom, delimited from the rest of the control by a splitter. In this mode, Office Navigation Bar items display NavBar groups icons instead of their captions. See the animation below for an example.

Expanded Collapsed NavPane Client

Another integration scenario is using the Office Navigation Bar as a replacement for one or several NavBarGroups when the Navigation Bar is collapsed (see the animation below). This scenario emulates the UI found in MS Outlook 2013 and is useful if you need to display custom items in the collapsed Navigation Bar. Note that this works only when the Navigation Bar is in Navigation Pane View.

The following steps illustrate how to implement this integration scenario.

  1. Switch the Navigation Bar to the Navigation Pane View and populate it with groups and items.
  2. Add an Office Navigation Bar and populate it with custom items.
  3. Switch the OfficeNavigationBar.Orientation property to Vertical.
  4. Assign your Office Navigation Bar to the NavBarGroup.CollapsedNavPaneContentControl property to replace an individual collapsed group. Alternatively, use the OptionsNavPane.CollapsedNavPaneContentControl property to replace any collapsed Navigation Pane group with this Office Navigation Bar.

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