Patterns - Navigation

출처 : http://www.google.com/design/spec/patterns/navigation.html

     One level

Tabs

Products with a single level of navigation may use text-based tabs across the top.

To avoid scrolling, use a maximum of three to four horizontal tabs.

 

Mobile example with two sections

Mobile example with three sections

On tablet, tab width and alignment are determined by factors such as screen size, orientation, and the number of sections. Tabs can be either full bleed or fixed along the left, center, or right.

See Tabs for more information.

 

Tablet example of full-bleed tabs with four sections

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

Desktop example of centered fixed tabs

Navigation drawer

The navigation drawer may be used for navigation. It is closed by default and opens temporarily until a section is selected.

See UI Regions and Guidance for more information on top-level navigation strategies.

 

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 example of a side nav

Two levels

Navigation drawer + tabs

If your product has two levels of navigation, pair the left navigation drawer with tabs.

On mobile and tablet, the navigation drawer supports only a single level of navigation.

 

Mobile example of two levels using a navigation drawer and tabs

Mobile example of an open side nav

 

Tablet example of two levels using a navigation drawer and tabs

Tablet example of an open side nav

Desktop example of two levels using a navigation drawer and tabs

Navigation drawer

On desktop, a secondary level of navigation may be nested within the navigation drawer.

 

Desktop example of a nested side nav

Three levels or more

Navigation in content

If your product has multiple levels of navigation, the navigation drawer should contain the primary level of navigation.

Mobile and tablet
Sequential navigation levels can be integrated into the content and link to individual pages. 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 into content

Tablet example of up arrow

Nested navigation drawer + tabs (Desktop)

If your product has three levels of navigation, use both a nested navigation drawer and tabs.

 

Desktop example of nested side nav with tabs

Expanding navigation drawer (Desktop)

If your product has more than three levels of navigation, you may use an expandable hierarchy within the navigation drawer. Upon selection, a level collapses to reveal the next level of navigation below. Clicking on a collapsed section expands that level in-line within the drawer and hides all levels outside of the current selection.

 

Desktop example of an expanding side nav

Side nav content three levels deep

Cascading navigation drawer (Desktop)

If your product has more than three levels of navigation, you may use cascading menus to expand navigation drawer content horizontally. Each level is presented in its own panel, and a level closes when a subsection is selected.

Desktop example of a cascading side nav