Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Navigating between pages (HTML)

Applies to Windows and Windows Phone

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

TopicDescription

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.

 

Related topics

For developers
Your first app - Part 3: PageControl objects and navigation
Adding app bars
Quickstart: Using single-page navigation
Quickstart: Adding a nav bar (NavBar)
Quickstart: Using a hub control for layout and navigation
WinJS.Navigation Namespace
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
For designers
Navigation patterns
Command patterns
Layout
Back button
Guidelines for the hub control
Guidelines for app bars
Making the app bar accessible

 

 

Show:
© 2014 Microsoft