Navigating between pages (HTML)

Article
04/18/2016

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Learn how to support navigation between pages and content within your app.

Most apps have multiple pages of content and functionality for users to explore and engage with. Here, we explain how apps typically use a single-page navigation model and show how to implement navigation using dedicated controls provided with the Windows Library for JavaScript (WinJS).

Multi-page navigation is used to navigate between pages or screens without worrying about app context. This is very typical of webpages within a website as opposed to an app. Each page has its own set of JavaScript functions and data, a new set of HTML markup to display, and style information.

In contrast, a single-page navigation model uses a single page to maintain app context and to load additional data and content as needed. You still split your app into multiple files, but instead of moving from page to page, your app loads other documents into the main page. Because your app's main page is never unloaded, your scripts are never unloaded and so it's easier to manage state, transitions, or animations. We recommend that apps use the single-page navigation model.

The Microsoft Visual Studio JavaScript project templates for apps use the single-page navigation model. In this model, HTML pages are loaded via the page's URI into a single, app-wide context. The pages are loaded as needed, typically in response to user actions.

For help choosing the best navigation pattern for your app, see Navigation patterns.

See the Flat navigation and Hierarchical navigation patterns in action as part of our App features, start to finish series.

In this section

Topic	Description
Quickstart: Using single-page navigation	Learn about the single-page navigation model and how you can implement it in your own app by using PageControl objects and WinJS.Navigation features.
Quickstart: Adding a nav bar	Learn how to add a navigation bar (also called a "nav bar" or "top app bar") to your Windows Store app using JavaScript.
Quickstart: Using a hub control for layout and navigation	Learn how to add a Hub control to your Windows Store app using JavaScript.
Quickstart: Using a pivot control for layout and navigation	Learn how to use a WinJS.UI.Pivot control for layout and navigation in your Windows Phone 8.1 app.
How to link to external web pages	Learn how to link to external web pages and display them in your app.