We want the navigation to get out of the way of what people really want to look at on their screen. We use three predominant navigation structures to make that happen: flat, contextual and deep.


The user moves between main views of functionality of equal importance. These views are navigated by using the tab navigation structure.


Associated building blocks


The user moves between different levels of detail within one view. These views are navigated by using the expansion navigation structure.


Associated building blocks


The user moves up and down hierarchical levels of an application. These views are navigated by using the page stack navigation structure.


Associated building blocks
Page stack

One last thing

We don’t combine flat with deep navigation in the same view.
When we need to use deep navigation, for example when the user taps on a piece of content from a tabbed view, the header will update to represent the new view.

The page stack (deep navigation) makes use of a back button which, when combined with tabs (flat navigation) in the same view, could be misinterpreted as another method for navigating between tabs.