Guidelines for navigation bars (Windows Store apps)

  • Article

Follow these guidelines when working with navigation bars (nav bars) for Windows Store apps. A navigation bar is an app bar that appears at the top of the app and contains navigation controls. The nav bar is great for switching between multiple contexts, including tabs, documents, and messaging or game sessions.

When to use a navigation bar

You can place navigation controls on the main canvas of the app or in the nav bar, and choosing the right surface can mean the difference between an app that's a breeze to use and one that's a burden. The navigation bar is best when you want to provide global access to all areas of your app on demand. The canvas is best when navigation is core to completing a task. For example, in a photo browsing app—which is all about finding and viewing photo files—all navigation should be done on the canvas by tapping, panning, or selecting content and the search box should be placed on the canvas to let users easily find files.

Anatomy of the nav bar

The nav bar appears when users swipe from the top or bottom edge. The animation used is the same as the App Bar animation since the Navigation Bar is housed inside of the top App Bar. While you can style items in the nav bar, the default appearance is a simple button. However, another typical visual treatment is the use of button and thumbnail.

Image of nav bar with buttons and thumbnails

You can also choose to include other functionality within the top app bar, such as adding a '+' button to create a new tab or session or integrating a search box. Place this extra functionality on the right side of the nav bar.

You can also divide the nav bar into multiple areas, as the Store app does. Here you can see the top section is for global navigation and the bottom section is for app categories.

Image of nav bar of the Store app

Dos and Don'ts

Do
  • Keep navigation and commanding separate. Ideally, put navigation in the top nav bar and commands in the bottom app bar.
  • Style the navigation buttons to be optimized for its content. For example: use a larger rectangular button to represent thumbnails.
  • Group commands and controls on nav bar into meaningfully distinct sections. For example: In the Store app, the top section is for global navigation and the bottom section is for app categories.
  • Use navigation split buttons to organize first level and second level navigation commands.
  • Change to vertical layout for smaller window sizes.
Don't
  • Do not hide UI that is critical to your core scenario in the navigation bar. Instead, put it on the app canvas. For example: if search is critical to your core scenario, put a search box on canvas, not in the nav bar or app bar.
  • Do not add a back button in the nav bar.

 

For designers

Commanding design

Navigation design

For developers (Windows Store app using JavaScript)

Quickstart: Adding a nav bar (NavBar)

Making the app bar accessible

For developers (Windows Store app using C++, C#, or Visual Basic)

Quickstart: Navigating between pages

For developers (Windows Store app using DirectX with C++)

Creating an app bar or Setting

 

 

Build date: 12/16/2013