Navigation design basics for UWP apps

Navigation in Universal Windows Platform (UWP) apps is based on a flexible model of navigation structures, navigation elements, and system-level features. Together, they enable a variety of intuitive user experiences for moving between apps, pages, and content.

In some cases, you might be able to fit all of your app's content and functionality onto a single page without requiring the user to do anything more than pan to navigate through that content. However, the majority of apps typically have multiple pages of content and functionality with which to explore, engage, and interact. When an app has more than one page, you need to provide the right navigation experience.

To be successful and make sense to users, multi-page navigation experiences in UWP apps include (described in detail later):

  • The right navigation structure

    Building a navigation structure that makes sense to the user is crucial to creating an intuitive navigation experience.

  • Compatible navigation elements that support the chosen structure.

    Navigation elements can help the user get to the content they want and can also let users know where they are within the app. However, they also take up space that could be used for content or commanding elements, so it's important to use the navigation elements that are right for your app's structure.

  • Appropriate responses to system-level navigation features (such as Back)

    To provide a consistent experience that feels intuitive, respond to system-level navigation features in predictable ways.

Build the right navigation structure

Let's look at an app as a collection of groups of pages, with each page containing a unique set of content or functionality. For example, a photo app might have a page for taking photos, a page for image editing, and another page for managing your image library. The way you arrange these pages into groups defines the app's navigation structure. There are two common ways to arrange a group of pages:

In a hierarchy As peers

Pages arranged in a hierarchy

Pages arranged as peers

Pages are organized into a tree-like structure. Each child page has only one parent, but a parent can have one or more child pages. To reach a child page, you travel through the parent. Pages exist side-by-side. You can go from one page to another in any order.

A typical app will use both arrangements, with some portions being arranged as peers and some portions being arranged into hierarchies.

an app with a hybrid structure

So, when should you arrange pages into hierarchies and when you should arrange them as peers? To answer that question we must consider the number of pages in the group, whether the pages should be traversed in a particular order, and the relationship between the pages. In general, flatter structures are easier to understand and faster to navigate, but sometimes it's appropriate to have a deep hierarchy.

We recommend using a hierarchical relationship when
  • You expect the user to traverse the pages in a specific order. Arrange the hierarchy to enforce that order.
  • There is a clear parent-child relationship between one of the pages and the other pages in the group.
  • There are more than 7 pages in the group.

    When there are more than 7 pages in the group, it might be difficult for users to understand how the pages are unique or to understand their current location within the group. If you don't think that's an issue for your app, go ahead and make the pages peers. Otherwise, consider using a hierarchical structure to break the pages into two or more smaller groups. (A hub control can help you group pages into categories.)

We recommend using a peer relationship when
  • The pages can be viewed in any order.
  • The pages are clearly distinct from each other and don't have an obvious parent/child relationship.
  • There are fewer than 8 pages in the group.

    When there are more than 7 pages in the group, it might be difficult for users to understand how the pages are unique or to understand their current location within the group. If you don't think that's an issue for your app, go ahead and make the pages peers. Otherwise, consider using a hierarchical structure to break the pages into two or more smaller groups. (A hub control can help you group pages into categories.)

Use the right navigation elements

Navigation elements can provide two services: they help the user get to the content they want, and some elements also let users know where they are within the app. However, they also take up space that the app could use for content or commanding elements, so it's important to use the navigation elements that are just right for your app's structure.

Peer-to-peer navigation elements

Peer-to-peer navigation elements enable navigation between pages in the same level of the same subtree.

peer to peer navigation

For peer-to-peer navigation, we recommend using tabs or a navigation pane.

Navigation element Description
Tabs and pivot

Tab-based navigation

Displays a persistent list of links to pages at the same level.

Use tabs/pivots when:

  • There are 2-5 pages.

    (You can use tabs/pivots when there are more than 5 pages, but it might be difficult to fit all the tabs/pivots on the screen.)

  • You expect users to switch between pages frequently.

This design for a restaurant-finding app uses tabs/pivots:

Example of an app using tabs/pivots pattern

Nav pane

A navigation pane

Displays a list of links to top-level pages.

Use a navigation pane when:

  • You don't expect users to switch between pages frequently.
  • You want to conserve space at the expense of slowing down navigation operations.
  • The pages exist at the top level.

This design for a smart home app features a nav pane:

Example of an app that uses a nav pane pattern

If your navigation structure has multiple levels, we recommend that peer-to-peer navigation elements only link to the peers within their current subtree. Consider the following illustration, which shows a navigation structure that has three levels:

an app with two subtrees

  • For level 1, the peer-to-peer navigation element should provide access to pages A, B, C, and D.
  • At level 2, the peer-to-peer navigation elements for the A2 pages should only link to the other A2 pages. They should not link to level 2 pages in the C subtree.

an app with two subtrees

Hierarchical navigation elements

Hierarchical navigation elements provide navigation between a parent page and its child pages.

hiearchical navigation

Navigation element Description
Hub

Hub

A hub is a special type of navigation control that provides previews/summaries of its child pages. Unlike the navigation pane or tabs, it provides navigation to these child pages through links and section headers embedded in the page itself.

Use a hub when:

  • You expect that users would want to view some of the content of the child pages without having to navigate to each one.

Hubs promote discovery and exploration, which makes them well suited for media, news-reader, and shopping apps.

Master/details

Master/details

Displays a list (master view) of item summaries. Selecting an item displays its corresponding items page in the details section.

Use the Master/details element when:

  • You expect users to switch between child items frequently.
  • You want to enable the user to perform high-level operations, such as deleting or sorting, on individual items or groups of items, and also want to enable the user to view or update the details for each item.

Master/details elements are well suited for email inboxes, contact lists, and data entry.

This design for a stock-tracking app makes use of a master/details pattern:

Example of a stock trading app that has a master/details pattern

Historical navigation elements

Navigation element Description
Back Lets the user traverse the navigation history within an app and, depending on the device, from app to app. For more info, see the Navigation history and backwards navigation article.

Content-level navigation elements

Navigation element Description
Hyperlinks and buttons Content-embedded navigation elements appear in a page's content. Unlike other navigation elements, which should be consistent across the page's group or subtree, content-embedded navigation elements are unique from page to page.

Combining navigation elements

You can combine navigation elements to create a navigation experience that's right for your app. For example, your app might use a nav pane to provide access to top-level pages and tabs to provide access to second-level pages.