Top app bar

A sample of what a standard navigation bar control looks like

Control description

The navigation bar, or top app bar, is the recommended place to put navigation controls that let the user access other areas of the app. By using the top app bar for navigation, you provide a consistent and predictable user experience for navigating Windows Store apps. Consistency gives users the confidence to move around the system and helps them transfer their knowledge of app navigation from app to app.

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

Usage guidance

Use the navigation bar to display navigation commands. Placing navigation on the right surface at the right time can mean the difference between an app that's a breeze to use and one that's a burden. Users should be able to complete core scenarios just by using the canvas. The navigation bar is a secondary location for navigation controls. The navigation bar can help orient the user to all parts of an app, can provide quick access to the home page, or can encourage users to explore by jumping to different parts of the app.

You can also choose to include other functionality within the top app bar, such as adding a '+' button to create something new or integrating a search box. When you add other functionality, we recommend that you place these on the right side of the app bar.

Examples

A screenshot that illustrates the standard navigation bar control

Related topics

For designers
Command patterns
Layout
Hub
Bottom app bar
Guidelines for app bars (Windows Store apps)
Making the app bar accessible
For developers (Windows Store apps using JavaScript and HTML)
WinJS.UI.AppBar object
WinJS.UI.NavBar object
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 (Windows Store apps using C#/VB/C++ and XAML)
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
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 Store apps using DirectX and C++)
Creating an app bar or Setting

 

 

Show:
© 2014 Microsoft