NavigationView NavigationView NavigationView NavigationView Class


Represents a container that enables navigation of app content. It has a header, a view for the main content, and a menu pane for navigation commands.

public : class NavigationView : ContentControl
struct winrt::Microsoft::UI::Xaml::Controls::NavigationView : ContentControl
public class NavigationView : ContentControl
Public Class NavigationView Inherits ContentControl
<NavigationView .../>


Access keys for built-in elements

To add access keys for the back arrow and settings buttons that are built-in to NavigationView, you have to use VisualTreeHelper to get a reference to those controls, then set the properties in your code.

This example shows how to handle the Loaded event to find the elements in the visual tree and set the AccessKey and KeyTipPlacementMode properties.

private void NavigationView_Loaded(object sender, RoutedEventArgs e)
    // using muxc = Microsoft.UI.Xaml.Controls;

    var navView = sender as muxc.NavigationView;
    var rootGrid = VisualTreeHelper.GetChild(navView, 0) as Grid;

    // Find the back button.
    var paneToggleButtonGrid = VisualTreeHelper.GetChild(rootGrid, 0) as Grid;
    var buttonHolderGrid = VisualTreeHelper.GetChild(paneToggleButtonGrid, 1) as Grid;
    var navigationViewBackButton = VisualTreeHelper.GetChild(buttonHolderGrid, 0) as Button;

    navigationViewBackButton.AccessKey = "A";

    if (navView.PaneDisplayMode == muxc.NavigationViewPaneDisplayMode.Top)
        // Set back button key tip placement mode.
        navigationViewBackButton.KeyTipPlacementMode = Windows.UI.Xaml.Input.KeyTipPlacementMode.Bottom;

        // Find the settings item and set properties.
        var grid = VisualTreeHelper.GetChild(rootGrid, 1) as Grid;
        var topNavArea = VisualTreeHelper.GetChild(grid, 0) as StackPanel;
        var topNavGrid = VisualTreeHelper.GetChild(topNavArea, 1) as Grid;
        var settingsTopNavPaneItem = VisualTreeHelper.GetChild(topNavGrid, 8) as muxc.NavigationViewItem;

        settingsTopNavPaneItem.AccessKey = "S";
        settingsTopNavPaneItem.KeyTipPlacementMode = Windows.UI.Xaml.Input.KeyTipPlacementMode.Bottom;
        // Set back button key tip placement mode.
        navigationViewBackButton.KeyTipPlacementMode = Windows.UI.Xaml.Input.KeyTipPlacementMode.Right;

        // Find the settings item and set properties.
        var grid = VisualTreeHelper.GetChild(rootGrid, 1) as Grid;
        var rootSplitView = VisualTreeHelper.GetChild(grid, 1) as SplitView;
        var grid2 = VisualTreeHelper.GetChild(rootSplitView, 0) as Grid;
        var paneRoot = VisualTreeHelper.GetChild(grid2, 0) as Grid;
        var border = VisualTreeHelper.GetChild(paneRoot, 0) as Border;
        var paneContentGrid = VisualTreeHelper.GetChild(border, 0) as Grid;
        var settingsNavPaneItem = VisualTreeHelper.GetChild(paneContentGrid, 6) as muxc.NavigationViewItem;

        settingsNavPaneItem.AccessKey = "S";
        settingsNavPaneItem.KeyTipPlacementMode = Windows.UI.Xaml.Input.KeyTipPlacementMode.Right;


NavigationView() NavigationView() NavigationView() NavigationView()

Initializes a new instance of the NavigationView class.


AlwaysShowHeader AlwaysShowHeader AlwaysShowHeader AlwaysShowHeader

Gets or sets a value that indicates whether the header is always visible.

AlwaysShowHeaderProperty AlwaysShowHeaderProperty AlwaysShowHeaderProperty AlwaysShowHeaderProperty

Identifies the AlwaysShowHeader dependency property.

AutoSuggestBox AutoSuggestBox AutoSuggestBox AutoSuggestBox

Gets or sets an AutoSuggestBox to be displayed in the NavigationView.

AutoSuggestBoxProperty AutoSuggestBoxProperty AutoSuggestBoxProperty AutoSuggestBoxProperty

Identifies the AutoSuggestBox dependency property.

CompactModeThresholdWidth CompactModeThresholdWidth CompactModeThresholdWidth CompactModeThresholdWidth

Gets or sets the minimum window width at which the NavigationView enters Compact display mode.

CompactModeThresholdWidthProperty CompactModeThresholdWidthProperty CompactModeThresholdWidthProperty CompactModeThresholdWidthProperty

Identifies the CompactModeThresholdWidth dependency property.

CompactPaneLength CompactPaneLength CompactPaneLength CompactPaneLength

Gets or sets the width of the NavigationView pane in its compact display mode.

CompactPaneLengthProperty CompactPaneLengthProperty CompactPaneLengthProperty CompactPaneLengthProperty

Identifies the CompactPaneLength dependency property.

ContentOverlay ContentOverlay ContentOverlay ContentOverlay

Gets or sets a UI element that is shown at the top of the control, below the pane if PaneDisplayMode is Top.

ContentOverlayProperty ContentOverlayProperty ContentOverlayProperty ContentOverlayProperty

Identifies the ContentOverlay dependency property.

DisplayMode DisplayMode DisplayMode DisplayMode

Gets a value that specifies how the pane and content areas of a NavigationView are being shown.

DisplayModeProperty DisplayModeProperty DisplayModeProperty DisplayModeProperty

Identifies the DisplayMode dependency property.

ExpandedModeThresholdWidth ExpandedModeThresholdWidth ExpandedModeThresholdWidth ExpandedModeThresholdWidth

Gets or sets the minimum window width at which the NavigationView enters Expanded display mode.

ExpandedModeThresholdWidthProperty ExpandedModeThresholdWidthProperty ExpandedModeThresholdWidthProperty ExpandedModeThresholdWidthProperty

Identifies the ExpandedModeThresholdWidth dependency property.

Header Header Header Header

Gets or sets the header content.

HeaderProperty HeaderProperty HeaderProperty HeaderProperty

Identifies the Header dependency property.

HeaderTemplate HeaderTemplate HeaderTemplate HeaderTemplate

Gets or sets the DataTemplate used to display the control's header.

HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty

Identifies the HeaderTemplate dependency property.

IsBackButtonVisible IsBackButtonVisible IsBackButtonVisible IsBackButtonVisible

Gets or sets a value that indicates whether the back button is enabled or disabled.

IsBackButtonVisibleProperty IsBackButtonVisibleProperty IsBackButtonVisibleProperty IsBackButtonVisibleProperty

Identifies the IsBackButtonVisible dependency property.

IsBackEnabled IsBackEnabled IsBackEnabled IsBackEnabled

Gets or sets a value that indicates whether the back button is enabled or disabled.

IsBackEnabledProperty IsBackEnabledProperty IsBackEnabledProperty IsBackEnabledProperty

Identifies the IsBackEnabled dependency property.

IsPaneOpen IsPaneOpen IsPaneOpen IsPaneOpen

Gets or sets a value that specifies whether the NavigationView pane is expanded to its full width.

IsPaneOpenProperty IsPaneOpenProperty IsPaneOpenProperty IsPaneOpenProperty

Identifies the IsPaneOpen dependency property.

IsPaneToggleButtonVisible IsPaneToggleButtonVisible IsPaneToggleButtonVisible IsPaneToggleButtonVisible

Gets or sets a value that indicates whether the menu toggle button is shown.

IsPaneToggleButtonVisibleProperty IsPaneToggleButtonVisibleProperty IsPaneToggleButtonVisibleProperty IsPaneToggleButtonVisibleProperty

Identifies the IsPaneToggleButtonVisible dependency property.

IsPaneVisible IsPaneVisible IsPaneVisible IsPaneVisible

Gets or sets a value that determines whether the pane is shown.

IsPaneVisibleProperty IsPaneVisibleProperty IsPaneVisibleProperty IsPaneVisibleProperty

Identifies the IsPaneVisible dependency property.

IsSettingsVisible IsSettingsVisible IsSettingsVisible IsSettingsVisible

Gets or sets a value that indicates whether the settings button is shown.

IsSettingsVisibleProperty IsSettingsVisibleProperty IsSettingsVisibleProperty IsSettingsVisibleProperty

Identifies the IsSettingsVisible dependency property.

IsTitleBarAutoPaddingEnabled IsTitleBarAutoPaddingEnabled IsTitleBarAutoPaddingEnabled IsTitleBarAutoPaddingEnabled

Identifies the AddButtonCommandParameter dependency property.

IsTitleBarAutoPaddingEnabledProperty IsTitleBarAutoPaddingEnabledProperty IsTitleBarAutoPaddingEnabledProperty IsTitleBarAutoPaddingEnabledProperty
MenuItemContainerStyle MenuItemContainerStyle MenuItemContainerStyle MenuItemContainerStyle

Gets or sets the style that is used when rendering the menu item containers.

MenuItemContainerStyleProperty MenuItemContainerStyleProperty MenuItemContainerStyleProperty MenuItemContainerStyleProperty

Identifies the MenuItemContainerStyle dependency property.

MenuItemContainerStyleSelector MenuItemContainerStyleSelector MenuItemContainerStyleSelector MenuItemContainerStyleSelector

Gets or sets a reference to a custom StyleSelector logic class. The StyleSelector returns different Style values to use for the item container based on characteristics of the object being displayed.

MenuItemContainerStyleSelectorProperty MenuItemContainerStyleSelectorProperty MenuItemContainerStyleSelectorProperty MenuItemContainerStyleSelectorProperty

Identifies the MenuItemContainerStyleSelector dependency property.

MenuItems MenuItems MenuItems MenuItems

Gets the collection of menu items displayed in the NavigationMenu.

MenuItemsProperty MenuItemsProperty MenuItemsProperty MenuItemsProperty

Identifies the MenuItems dependency property.

MenuItemsSource MenuItemsSource MenuItemsSource MenuItemsSource

Gets or sets an object source used to generate the content of the NavigationView menu.

MenuItemsSourceProperty MenuItemsSourceProperty MenuItemsSourceProperty MenuItemsSourceProperty

Identifies the MenuItemsSource dependency property.

MenuItemTemplate MenuItemTemplate MenuItemTemplate MenuItemTemplate

Gets or sets the DataTemplate used to display each menu item.

MenuItemTemplateProperty MenuItemTemplateProperty MenuItemTemplateProperty MenuItemTemplateProperty

Identifies the MenuItemTemplate dependency property.

MenuItemTemplateSelector MenuItemTemplateSelector MenuItemTemplateSelector MenuItemTemplateSelector

Gets or sets a reference to a custom DataTemplateSelector logic class. The DataTemplateSelector referenced by this property returns a template to apply to items.

MenuItemTemplateSelectorProperty MenuItemTemplateSelectorProperty MenuItemTemplateSelectorProperty MenuItemTemplateSelectorProperty

Identifies the MenuItemTemplateSelector dependency property.

OpenPaneLength OpenPaneLength OpenPaneLength OpenPaneLength

Gets or sets the width of the NavigationView pane when it's fully expanded.

OpenPaneLengthProperty OpenPaneLengthProperty OpenPaneLengthProperty OpenPaneLengthProperty

Identifies the OpenPaneLength dependency property.

OverflowLabelMode OverflowLabelMode OverflowLabelMode OverflowLabelMode

Gets or sets a value that indicates what text label is shown for the overflow menu.

OverflowLabelModeProperty OverflowLabelModeProperty OverflowLabelModeProperty OverflowLabelModeProperty

Identifies the OverflowLabelMode dependency property.

PaneCustomContent PaneCustomContent PaneCustomContent PaneCustomContent

Gets or sets a UI element that is shown in the NavigationView pane.

PaneCustomContentProperty PaneCustomContentProperty PaneCustomContentProperty PaneCustomContentProperty

Identifies the PaneCustomContent dependency property.

PaneDisplayMode PaneDisplayMode PaneDisplayMode PaneDisplayMode

Gets or sets a value that indicates how and where the NavigationView pane is shown.

PaneDisplayModeProperty PaneDisplayModeProperty PaneDisplayModeProperty PaneDisplayModeProperty

Identifies the PaneDisplayMode dependency property.

PaneFooter PaneFooter PaneFooter PaneFooter

Gets or sets the content for the pane footer.

PaneFooterProperty PaneFooterProperty PaneFooterProperty PaneFooterProperty

Identifies the PaneFooter dependency property.

PaneHeader PaneHeader PaneHeader PaneHeader

Gets or sets the content for the pane header.

PaneHeaderProperty PaneHeaderProperty PaneHeaderProperty PaneHeaderProperty

Identifies the PaneHeader dependency property.

PaneTitle PaneTitle PaneTitle PaneTitle

Gets or sets the label adjacent to the menu icon when the NavigationView pane is open.

PaneTitleProperty PaneTitleProperty PaneTitleProperty PaneTitleProperty

Identifies the PaneTitle dependency property.

PaneToggleButtonStyle PaneToggleButtonStyle PaneToggleButtonStyle PaneToggleButtonStyle

Gets or sets the Style that defines the look of the menu toggle button.

PaneToggleButtonStyleProperty PaneToggleButtonStyleProperty PaneToggleButtonStyleProperty PaneToggleButtonStyleProperty

Identifies the PaneToggleButtonStyle dependency property.

SelectedItem SelectedItem SelectedItem SelectedItem

Gets or sets the selected item.

SelectedItemProperty SelectedItemProperty SelectedItemProperty SelectedItemProperty

Identifies the SelectedItem dependency property.

SelectionFollowsFocus SelectionFollowsFocus SelectionFollowsFocus SelectionFollowsFocus

Gets or sets a value that indicates whether item selection changes when keyboard focus changes.

SelectionFollowsFocusProperty SelectionFollowsFocusProperty SelectionFollowsFocusProperty SelectionFollowsFocusProperty

Identifies the SelectionFollowsFocus dependency property.

SettingsItem SettingsItem SettingsItem SettingsItem

Gets the navigation item that represents the entry point to app settings.

SettingsItemProperty SettingsItemProperty SettingsItemProperty SettingsItemProperty

Identifies the SettingsItem dependency property.

ShoulderNavigationEnabled ShoulderNavigationEnabled ShoulderNavigationEnabled ShoulderNavigationEnabled

Gets or sets a value that indicates when gamepad bumpers can be used to navigate the top-level navigation items in a NavigationView.

ShoulderNavigationEnabledProperty ShoulderNavigationEnabledProperty ShoulderNavigationEnabledProperty ShoulderNavigationEnabledProperty

Identifies the ShoulderNavigationEnabled dependency property.

TemplateSettings TemplateSettings TemplateSettings TemplateSettings

Gets an object that provides calculated values that can be referenced as TemplateBinding sources when defining templates for a NavigationView control.

TemplateSettingsProperty TemplateSettingsProperty TemplateSettingsProperty TemplateSettingsProperty

Identifies the TemplateSettings dependency property.


ContainerFromMenuItem(Object) ContainerFromMenuItem(Object) ContainerFromMenuItem(Object) ContainerFromMenuItem(Object)

Returns the container corresponding to the specified menu item.

MenuItemFromContainer(DependencyObject) MenuItemFromContainer(DependencyObject) MenuItemFromContainer(DependencyObject) MenuItemFromContainer(DependencyObject)

Returns the item that corresponds to the specified, generated container.


BackRequested BackRequested BackRequested BackRequested

Occurs when the back button receives an interaction such as a click or tap.

DisplayModeChanged DisplayModeChanged DisplayModeChanged DisplayModeChanged

Occurs when the DisplayMode property changes.

ItemInvoked ItemInvoked ItemInvoked ItemInvoked

Occurs when an item in the menu receives an interaction such a a click or tap.

PaneClosed PaneClosed PaneClosed PaneClosed

Occurs when the NavigationView pane is closed.

PaneClosing PaneClosing PaneClosing PaneClosing

Occurs when the NavigationView pane is closing.

PaneOpened PaneOpened PaneOpened PaneOpened

Occurs when the NavigationView pane is opened.

PaneOpening PaneOpening PaneOpening PaneOpening

Occurs when the NavigationView pane is opening.

SelectionChanged SelectionChanged SelectionChanged SelectionChanged

Occurs when the currently selected item changes.

Applies to

See also