Navigation within Apps

With older editions of Windows, applications had a guideline to include menus and a toolbar to navigate to the functionality within an app. Windows 8 had a radical deparature for the navigation structure. The functionality to navigate to other pages away from the current page should be hidden by default. The AppBar opened up using touch gestures from top or bottom. The AppBar for navigation usually was on top, while actions within the page have been on bottom. Windows 10 allows a lot more flexibility – you can define a navigation structure as you like.

How does the navigation structure typically looks like with Windows 10 apps? This article illustrates how this is done with a few apps and shows differences with different window sizes. With future articles I’m showing how this can be done using XAML.

Ship's steering wheel

Hamburger Button and Split View

The space available for the menus can be small. Apps created for the Universal Windows Platform can run on Windows Phones as well as on the Desktop (other scale factors for HoloLens and Xbox should not be missed). The space is not only limited on the phone, but also on the desktop if the Window size is moved to only take a small part of the screen. With Windows 10, apps can just take a Window and resized as the user like.
With this limited space available, the Hamburger button helps. The Hamburger button gives a design metaphor that a list of actions shows up clicking this button.

Apps taking advantage of the Hamburger button that opens a larger menu are the Weather app and Wunderlist. These apps behave a little bit different.

The Weather app shows the Hamburger button and the compact mode of the Split View, no matter if the Window is small or large. Clicking the Hamburger button, the pane of the Split View gets opened as shown in the following figures.

Weather App

Weather App Pane Opened

Wunderlist also uses the compact mode of the Split View but automatically opens the pane containing the menus when the Window size grows large enough.

Wunderlist Compact Mode

Wunderlist Pane Opened

Many other apps like Mail, Calendar, Fresh Paint… behave similar to the Weather app. The Movies app changes the Split View from compact mode to hide the pane completely when the Window size is reduced. The compact mode is only shown with larger Windows. On the phone the experience is often similar. However, the menu often is located on bottom instead of on top. This allows for easier access on the phone.

The Windows Store app shows a Hamburger button only if the Window is small:

Hamburger Button of the Windows Store

With a window large enough, the Hamburger button disappears, and the navigation menu appears horizontal on top:

Windows Store app with larger menu

Ribbon Control

With Windows Store app showing a menu oriented horizontally if the window is large enough, let’s take a look at Microsoft Edge. This app shows a horizontal list of menus. To open extended menus, the Ellipsis button is used – similar how the CommandBar creates a panel for its content with the Ellipsis button. On the Windows Phone, the menu list of Microsoft Edge appears on bottom instead as on top with the desktop.

Microsoft Edge Menus

Another step is taken with Word Mobile. This app offers a lightweight Ribbon Control:

Word Mobile


A requirement for menus and toolbars no longer exists, also not the requirement for a commands that just magically appear when the user does some specific gestures. Now you can offer the navigation within an app in a way you like. With this article you’ve seen simple menus like with the Windows Store app, ribbon-like functionality with Word Mobile, and different modes of a Hamburger button and a Split View. In future articles I’ll demonstrate how many of these scenarios can be done using XAML – with functionality included in the Windows Runtime, and by using the Microsoft UWP Community Toolkit.

Have fun with programming and learning!

More Information

More information programming apps for the Universal Windows Platform is available with my new book Professional C# 6 and .NET Core 1.0. In my workshops you can get customized information on UWP, WPF, ASP.NET Core, or other .NET technologies.

Steering Wheel © Scorpionpl | Ship’s steering wheel

2 thoughts on “Navigation within Apps

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s