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.

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.

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.

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:

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

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.

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

Summary

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!
Christian

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 | Dreamstime.com Ship’s steering wheel