Hub

A sample of what a standard hub control looks like

Control description

The hub control is a starting point for designing a visually stunning app. The hub control gives you a framework and gives you the flexibility to customize your app to fit your brand.

Many Windows Store apps use a hierarchical system of navigation. The hub, or landing page, is the user's entry point into an app and to additional levels of content including section and details pages. It should offer a lot of visual variety, engage users, and draw them in to different parts of the app.

Explore navigation functionality in more depth as part of our App features, start to finish series:  Hierarchical navigation, start to finish (HTML and XAML)

Usage guidance

Use the hub control as a starting point for creating a hierarchical pattern for your app. Customize the pages to reflect your app's personality and brand. Make sure that the main image on the hub page works well with overlaid text. Use interactive headers from the hub page and section pages to make it easy for users to navigate deeper into the content details.

Examples

A screenshot that illustrates the standard hub control

Related topics

For designers
Command patterns
Layout
Hub
Back button
Guidelines for the hub control
For developers (Windows Store apps using JavaScript and HTML)
WinJS.UI.Hub object
HTML Hub control sample
Navigation and navigation history sample
Your first app - Part 3: PageControl objects and navigation
Quickstart: Using a hub control for layout and navigation
Navigating between pages (HTML)
For developers (Windows Store apps using C#/VB/C++ and XAML)
Windows.UI.Xaml.Controls Hub class
XAML Hub control sample
XAML Navigation sample
Quickstart: Using a Hub
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)
Navigating between pages (XAML)

 

 

Show:
© 2014 Microsoft