Navigation history and backwards navigation for UWP apps

Important APIs: BackRequested event, SystemNavigationManager class, OnNavigatedTo

The Universal Windows Platform (UWP) provides a consistent back navigation system for traversing the user's navigation history within an app and, depending on the device, from app to app.

To implement backwards navigation in your app, place a back button at the top left corner of your app's UI. If your app uses the NavigationView control, then you can use NavigationView's built-in back button.

The user expects the back button to navigate to the previous location in the app's navigation history. Note that it's up to you to decide which navigation actions to add to the navigation history and how to respond to the back button press.

Back button

To create a back button, use the Button control with the NavigationBackButtonNormalStyle style, and place the button at the top left hand corner of your app's UI.

Back button in the top left of the app's UI

<Button Style="{StaticResource NavigationBackButtonNormalStyle}"/>

If your app has a top CommandBar, the Button control that is 44px in height will not align with 48px AppBarButtons very nicely. However, to avoid inconsistency, align the top of the Button control inside the 48px bounds.

Back button on top command bar

<Button VerticalAlignment="Top" HorizontalAlignment="Left" 
Style="{StaticResource NavigationBackButtonNormalStyle}"/>

In order to minimize UI elements moving around in your app, show a disabled back button when there is nothing in the backstack (see code example below).

Back button states

Code example

The following code example demonstrates how to implement backwards navigation behavior with a back button. The code responds to the Button Click event and disables/enables the button visibility in OnNavigatedTo, which is called when navigating to a new page. The code example also handles inputs from hardware and software system back keys by registering a listener for the BackRequested event.

<Page x:Class="AppName.MainPage">
<Button x:Name="BackButton" Click="Back_Click" Style="{StaticResource NavigationBackButtonNormalStyle}"/>


public MainPage()
    KeyboardAccelerator GoBack = new KeyboardAccelerator();
    GoBack.Key = VirtualKey.GoBack;
    GoBack.Invoked += BackInvoked;
    KeyboardAccelerator AltLeft = new KeyboardAccelerator();
    AltLeft.Key = VirtualKey.Left;
    AltLeft.Invoked += BackInvoked;
    // ALT routes here
    AltLeft.Modifiers = VirtualKeyModifiers.Menu;

protected override void OnNavigatedTo(NavigationEventArgs e)
    BackButton.IsEnabled = this.Frame.CanGoBack;

private void Back_Click(object sender, RoutedEventArgs e)

// Handles system-level BackRequested events and page-level back button Click events
private bool On_BackRequested()
    if (this.Frame.CanGoBack)
        return true;
    return false;

private void BackInvoked (KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
    args.Handled = true;

Here, we register a global listener for the BackRequested event in the App.xaml code-behind file. You can register for this event in each page if you want to exclude specific pages from back navigation, or you want to execute page-level code before displaying the page.

App.xaml code-behind:

Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += App_BackRequested;
Frame rootFrame = Window.Current.Content;
rootFrame.PointerPressed += On_PointerPressed;

private void App_BackRequested(object sender, Windows.UI.Core.BackRequestedEventArgs e)
    e.Handled = On_BackRequested();

private void On_PointerPressed(object sender, PointerRoutedEventArgs e)
    bool isXButton1Pressed = e.GetCurrentPoint(sender as UIElement).Properties.PointerUpdateKind == PointerUpdateKind.XButton1Pressed;

    if (isXButton1Pressed)
        e.Handled = On_BackRequested();

Optimizing for different device and form factors

This backwards navigation design guidance is applicable to all devices, but different device and form factors may benefit from optimization. This also depends on the hardware back button supported by different shells.

  • Phone/Tablet: A hardware or software back button is always present on mobile and tablet, but we recommend drawing an in-app back button for clarity.
  • Desktop/Hub: Draw the in-app back button on the top left corner of your app's UI.
  • Xbox/TV: Do not draw a back button, for it will add unnecessary UI clutter. Instead, rely on the Gamepad B button to navigate backwards.

If your app will run on multiple devices, create a custom visual trigger for Xbox to toggle the visibility of button. The NavigationView control will automatically toggle the back button's visibility if your app is running on Xbox.

We recommend supporting the following inputs for back navigation. (Note that some of these inputs are not supported by the system BackRequested and must be handled by separate events.)

Input Event
Windows-Backspace key BackRequested
Hardware back button BackRequested
Shell tablet mode back button BackRequested
VirtualKey.XButton1 PointerPressed
VirtualKey.GoBack KeyboardAccelerator.BackInvoked
Alt+LeftArrow key KeyboardAccelerator.BackInvoked

The code examples provided above demonstrate how to handle all of these inputs.

System back behavior for backward compatibilities

Previously, UWP apps used AppViewBackButtonVisibility for backwards navigation. The API will continue to be supported for backward compatibility, but we no longer recommend relying on the title bar back button. Instead, your app should draw its own in-app back button.

If your app continues to use AppViewBackButtonVisibility, then the back button will be rendered inside the title bar as usual.

title bar back button

Guidelines for custom back navigation behavior

If you choose to provide your own back stack navigation, the experience should be consistent with other apps. We recommend that you follow the following patterns for navigation actions:

Navigation action Add to navigation history?
Page to page, different peer groups Yes

In this illustration, the user navigates from level 1 of the app to level 2, crossing peer groups, so the navigation is added to the navigation history.

Navigation across peer groups

In the next illustration, the user navigates between two peer groups at the same level, again crossing peer groups, so the navigation is added to the navigation history.

Navigation across peer groups

Page to page, same peer group, no on-screen navigation element

The user navigates from one page to another with the same peer group. There is no navigation element that is always present (such as a top navigation pane or a docked left navigation pane) that provides direct navigation to both pages.


In the following illustration, the user navigates between two pages in the same peer group. The pages don't use a top nav bar or a docked left nav pane, so the navigation is added to the navigation history.

Navigation within a peer group

Page to page, same peer group, with an on-screen navigation element

The user navigates from one page to another in the same peer group. Both pages are shown in the same navigation element. For example, both pages use the same top pane element, or both pages appear in a docked left navigation pane.

It depends

Yes, add to the navigation history, but with 2 notable exceptions. If you expect users of your app to switch between pages in the peer group frequently, or if you wish to preserve the navigational state/history within a page of the peer group, then do not add to the navigation history. In this case, when the user presses back, go back to the last page before the user navigated to the current peer group.

Navigation across peer groups when a navigation element is present

Show a transient UI

The app displays a pop-up or child window, such as a dialog, splash screen, or on-screen keyboard, or the app enters a special mode, such as multiple selection mode.


When the user presses the back button, dismiss the transient UI (hide the on-screen keyboard, cancel the dialog, etc) and return to the page that spawned the transient UI.

Showing a transient UI

Enumerate items

The app displays content for an on-screen item, such as the details for the selected item in master/details list.


Enumerating items is similar to navigating within a peer group. When the user presses back, navigate to the page that preceded the current page that has the item enumeration.

Iterm enumeration


When the user switches to another app and returns to your app, we recommend returning to the last page in the navigation history