Navigation patterns (Windows Store apps)
Organize the content in your Windows Store app so your users can navigate easily and intuitively. Using the right navigation patterns helps you limit the controls that are persistently on screen. This lets people focus on the current content.
The navigation in Windows Store apps is based on two patterns: hierarchical and flat. An app can use one or the other or a combination of these patterns.
This pattern makes Windows Store apps fast and fluid. It is best for apps with large content collections or many distinct sections of content for a user to explore. Most Windows Store apps use a hierarchical system of navigation.
Hub pages are the user's entry point to the app. Here content is displayed in a rich horizontally panning view allowing users to get a glimpse of what's new and available.
The Hub consists of different categories of content, each of which maps to the app's section pages.
Section pages are the second level of an app. Here content can be displayed in any form that best represents the scenario and content the section contains.
The section page consists of individual items, each of which has its own detail page. Section pages may also take advantage of grouping and a panorama style layout.
Detail pages are the third level of an app. Here the details of individual items are displayed, the format of which may vary tremendously depending upon the particular type of content.
The detail page consists of item details or functionality. Detail pages may contain a lot of information or may contain a single object, such as a picture or video.
Many Windows Store apps use a flat navigation pattern. Apps such as games, browsers, or document creation apps use this pattern to let the user move between pages, tabs, or modes that all reside at the same hierarchical level. Unlike the hierarchical pattern, there is typically no persistent back button or navigation stack, so moving between pages is usually done either through direct links within the content, as in the first example below, or through the nav bar, as in the second example below.
This pattern is best when the core scenario involves fast switching between a small number of pages or tabs, for example, in web browser apps like Internet Explorer, ebooks, and games.
Header and back button
The header labels the current page and is useful for wayfinding. The back button makes it fast to get back to where you were.
Section or category labels
These labels move the user to different sections or categories of content.
- Other targets
You can use tiles, arrows, buttons, search results or other customized targets as navigation elements. In some games you can find examples of navigation elements with interesting shapes.
By swiping from the top or bottom edge of the screen, a user reveals the app bars. The top app bar is also called the navigation bar, or nav bar. You can place navigation elements in the top app bar so that more screen area is available for the content in your app to shine. Alternatively, you can place navigation elements on the canvas if users frequently need them when using your app, and if having them on the canvas doesn’t negatively impact the app experience. You decide if navigation elements belong in the top bar or on the canvas.
Commonly, section or category labels are in the navigation bar, as in Hulu Plus.
Many apps use the top app bar to provide shortcuts. For example, in the ESPN app, a user can navigate to a gamecast page by clicking a scoreboard above the section labels in the top app bar.
The top app bar can also give users a preview of the content on the target page. In the following shopping app example, you can preview the product images in the app bar before diving into a product detail page.
We encourage you to push your design further by using the app bars in creative ways. In Fresh Paint, the top app bar goes beyond its dedicated navigation function and doubles as a painting toolbox.
Semantic zoom makes scanning and moving around a view fast and fluid, especially when the view is a long panning list.
For example, in Great British Chefs, the hub page has a spotlight section followed by five visually rich, horizontally panning sections. The app uses semantic zoom to make it easier to jump to each of the five sections.
For more info, see Guidelines for semantic zoom.
- For designers
- Command patterns
- Back button
- Guidelines for hub controls in Windows Store apps
- Guidelines for hub controls in Windows Phone Store apps
- Guidelines for app bars
- Making the app bar accessible
- For developers (HTML)
- WinJS.UI.Hub object
- WinJS.UI.AppBar object
- WinJS.UI.NavBar object
- WinJS.UI.BackButton object
- HTML Hub control sample
- HTML AppBar control sample
- HTML NavBar control sample
- Navigation and navigation history sample
- Your first app - Part 3: PageControl objects and navigation
- Adding app bars
- Adding nav bars
- Navigating between pages (HTML)
- For developers (XAML)
- Windows.UI.Xaml.Controls Hub class
- Windows.UI.Xaml.Controls AppBar class
- Windows.UI.Xaml.Controls CommandBar class
- XAML Hub control sample
- XAML AppBar control sample
- XAML Navigation sample
- Your first app - Part 3: Navigation, layout, and views
- Your first app - Add navigation and views in a C++ Windows Store app (tutorial 3 of 4)
- Adding app bars (XAML)
- Navigating between pages (XAML)
- For developers (Windows Runtime apps using DirectX with C++)
- Creating an app bar or Setting