Patterns – Navigational transitions

Navigational transitions

Navigational transitions are movements between states in an app, such as from a high-level view to a detailed view.

Most, but not all, transitions are hierarchical in nature. These moments should appropriately reflect the user’s journey through each state of an app.

Hierarchy and elevation

When elements lift up and expand, the elevation change indicates a shift in focus from parent to child elements.

Sibling transitions occur between elements at the same level of hierarchy without elevation changes.

Parent to child Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Exploring deeper levels, or screens, of an app is a hierarchical journey that starts at a parent screen. From there, a user can explore multiple possible sub-screens, which are children to the parent screen.

In Material Design, elevation changes indicate changes in focus from parent to child elements.

Elevation and expansion

The surface that the user touches should lift up and expand into place from its origin. This expansion and motion highlights movement away from the parent towards a destination (a child element) in a natural movement using the material motion curve.

Parent-to-child transition animation

Animation of parent-to-child transition

Sibling to sibling Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Sibling transitions are transitions that occur between elements at the same level of hierarchy.

Static elevation

When a user navigates through tabs, for example, no elevation changes occur. The content and surface of each tab stays at the same elevation level. New content slides in from the right while sibling content moves off-screen to the left.

Sibling transition

Animation of sibling-to-sibling transition