Layouts: Sliding Panes

Pane Navigation



The Sliding Panes layout uses multiple panes to organize content hierarchically. Each level in the hierarchy is represented by a pane. The topmost level corresponds to the pane furthest to the left; lower levels slide into view from the right, on top of the panes below.

New panes are added dynamically as the user drills down through the hierarchy. When the user selects an item in a pane, a new pane slides in from the right. There is no limit to the number of panes that can be stacked in this way.

The currently selected list item within a pane is shown highlighted.

In landscape orientation, up to three panes are visible at any time. In portrait orientation, however, only a portion of the third pane is visible. If the user selects an item from a pane that is not the leftmost pane, the pane should automatically slide over to the left and a new pane slide in from the right to make sure that the new pane is visible.

Eventually, when the bottom of the hierarchy is reached, a detail pane is revealed.

Generally, panes are 320 px in width, but the detail pane can vary its width to fill the remaining space. It can fill the entire width of the screen if it is the only pane shown. Content within the pane should reflow to fit the available space.

Each pane can contain its own header and footer area.

The user can dismiss the rightmost pane by swiping it away from left to right.

App Examples

Pane Peeking



Panes can be designed such that a portion of the leftmost pane (50 pixels is recommended) always remains visible.

This allows the user to always have a "peek" of the top-level navigation options and easily switch between the panes no matter how deep the user is within the hierarchy.

It is recommended that peeking be employed only if the following conditions are met: