# View Mode | WPF Controls | DevExpress Documentation

The [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl) can display its root items in either a navigation pane or as accordion items.

Use the [AccordionControl.ViewMode](/WPF/DevExpress.Xpf.Accordion.AccordionControl.ViewMode) property to specify how the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl) displays its root items.

![WPF_Accordion_ViewMode](/WPF/images/wpf_accordion_viewmode133135.png)

## NavigationPane View Mode

The [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl) displays the subitems of the selected root item in [AccordionViewMode.NavigationPane](/WPF/DevExpress.Xpf.Accordion.AccordionViewMode) mode.

**Selecting Root Items**

- **In code.** You can specify the selected root item using the [AccordionControl.SelectedRootItem](/WPF/DevExpress.Xpf.Accordion.AccordionControl.SelectedRootItem) property.
- **In runtime.** End-users can select the required root item from the overflow panel displayed in the bottom of the accordion control.

**Integration with the Office Navigation Bar**

The [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl) automatically switches to [AccordionViewMode.NavigationPane](/WPF/DevExpress.Xpf.Accordion.AccordionViewMode) mode when [integrated](/WPF/115594/controls-and-libraries/navigation-controls/office-navigation-bar) with the [OfficeNavigationBar](/WPF/DevExpress.Xpf.Navigation.OfficeNavigationBar).

If the [AccordionControl.CompactNavigation](/WPF/DevExpress.Xpf.Accordion.AccordionControl.CompactNavigation) property is set to **true**, the original [OfficeNavigationBar](/WPF/DevExpress.Xpf.Navigation.OfficeNavigationBar) that is linked to the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl) is hidden, and the **Overflow Panel** is displayed instead, as illustrated in the image below.

![CompactNavigation](/WPF/images/compactnavigation133058.png)

End-users can change the value of the [AccordionControl.CompactNavigation](/WPF/DevExpress.Xpf.Accordion.AccordionControl.CompactNavigation) property using the **Compact Navigation** checkbox in the [OfficeNavigationBar](/WPF/DevExpress.Xpf.Navigation.OfficeNavigationBar)‘s **Navigation Options** menu. This checkbox is only shown if the [OfficeNavigationBar](/WPF/DevExpress.Xpf.Navigation.OfficeNavigationBar) is linked to an [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl).

The accordion root items that could not fit into **Overflow Panel** or Office **Navigation Bar** are displayed within the [popup menu](/WPF/120315/controls-and-libraries/navigation-controls/accordion-control/visual-elements/popup-menu).

**Overflow Panel**

When the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl) works in **NavigationPane** view mode and is collapsed, the **Overflow Panel** switches to a vertical orientation. End-users can change its height using the separator.

![Accordion_collapsed.png](/WPF/images/accordion_collapsed.png133141.png)

**Peek Form**

You can display additional information for each individual navigation bar item using a peek form. When an end-user hovers the mouse over a navigation bar item, a **Peek Form** pops up (see image below).

![accordion peek form.png](/WPF/images/accordion-peek-form.png133138.png)

Use the item’s [AccordionItem.PeekFormTemplate](/WPF/DevExpress.Xpf.Accordion.AccordionItem.PeekFormTemplate) property to specify a template used to render peek form content for this item.