Patterns chevron_right App structure

App structure

Your app's structure should be influenced by the content and tasks you want to show your users. For example, your app could:

  • Focus on a single activity (such as a calculator or game)
  • Contain limited navigation (such as a phone dialer with contacts)
  • Contain complex data views and deep navigation (such as a mail app with folders)

Start screen Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The start screen is the first screen people will see when launching your app, and it should benefit both new and regular visitors. Structure the experience according to what typical users will want to do.

  • Put content forward. Make content the centerpiece of your start screen. Use visually engaging and responsive layouts.
  • Anchor navigation and actions. Consider the app bar for presenting navigation controls, including tab switching and search.
  • Focus on functionality. Highlight important navigation destinations and de-emphasize infrequent ones. Use the floating action button to promote a primary action.

Top-level navigation strategies Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Top-level navigation introduces your app’s major functions. Match the navigation to the complexity, or simplicity, of your views.

A single view with embedded navigation

Apps with simple structures can embed navigation within app content. However, doing so reduces the space available to display content.

Recommended for:

  • Apps with a strong primary view, and few alternates
  • Completing common tasks
  • Infrequent usage

Tabs

Tabs switch between a small number of equally important views. They can increase awareness of top-level views for apps with few functions or shallow hierarchies. Tabs take up significant space on smaller displays, so short labels are encouraged.

Recommended for:

  • Frequent view switching
  • Limited number of top-level views
  • Promoting awareness of alternate views

Mobile

For apps with a single level of navigation, text-based tabs can be used across the top.

Three to four horizontal tabs are the recommended maximum, using short strings, to avoid scrolling on smaller devices.

 

Mobile example with two tabs

Mobile example with three tabs

Tablet and desktop

Screen size, orientation, and the number of sections determine if tabs should be:

  • Full-bleed or fixed
  • Aligned left, center, or right

 

Tablet with full-bleed tabs with four sections

Tablet with left-aligned fixed tabs with title and extended header

Desktop with centered fixed tabs

Side navigation and navigation drawers

To display many navigation targets at once, use side navigation. It can appear either with or without a navigation drawer. A drawer can be an efficient way to switch contexts from lower-level screens, and it remains hidden until invoked by the user. Apps with a single “home” should list the most frequently accessed destinations at the top of the navigation drawer.

Recommended for:

  • Apps with a large number of top-level views
  • Quick navigation between unrelated views
  • Deep navigation structures
  • Reducing visibility of infrequent destinations

Mobile and tablet

The navigation drawer is closed by default and temporarily opens until a section is selected.

 

Mobile example of a closed side nav

Mobile example of an open side nav

 

Tablet example of a closed side nav

Tablet example of an open side nav

Desktop

The navigation can appear directly on the page rather than in a drawer.

Desktop example of a side nav

Combining navigation strategies Expand and collapse content An arrow that points down when collapsed and points up when expanded.

In-context navigation

In-context navigation allows nimble movement between related sets of data when used with tabs or navigation drawers.

Use it to:

  • Link a song to an artist
  • Move between recent items and a complete history
  • Connect a user’s post to their profile page

The up arrow is used to return to the previous level.

Mobile example of navigation integrated into content

Mobile example of an up arrow

 

Tablet example of navigation integrated within content

Tablet example of an up arrow

Side nav and tab combinations

Products with two levels of navigation may pair a left navigation drawer with tabs.

 

Mobile example using two levels of navigation: a navigation drawer and tabs

Mobile example of an open left nav

 

Tablet example using two levels of navigation: a navigation drawer and tabs

Tablet example of an open left nav in front of tabs

Desktop example using two levels of navigation: a navigation drawer and tabs