---
url: /foundations/layout/canonical-examples/supporting-pane.md
description: >-
  Canonical layout examples are designs for common screen layouts across all
  breakpoints
---

# Canonical layout examples

Canonical layout examples are designs for common screen layouts across all breakpoints

[Overview](overview.md) · [Feed](feed.md) · [List-detail](list-detail.md) · **Supporting pane**

The supporting pane layout organizes content into primary and secondary areas. 



The primary area contains the main content and occupies the majority of the space. The secondary area contains supporting content.



Key use cases for supporting pane layouts include:

* Productivity
* Document editing and commenting
* Content and media browsing

![A video app has the main content in the primary area and “up next” content is listed in the secondary area.](/assets/ff80225e-mp54jbnh-01.rlTSBsnm.webp)

Supporting pane layouts organize content into primary and secondary areas

## Usage

Use the supporting pane layout when the secondary content is only meaningful in relation to the primary content. 



For content with a parent-child relationship, use a [list-detail layout](list-detail.md) instead.

![The supporting pane has vertically stacked cards.](/assets/d4928473-mp54n3m1-02.D6SKw3hf.webp)

Supporting panes provide contextual info for the primary area

## Dividing space

The window is divided between a focus pane and a supporting pane.



Depending on the breakpoint, the supporting pane may appear below or beside the focus pane.

![The cards of a supporting pane scroll horizontally across the bottom of the screen.](/assets/b745067b-mp54omgc-03.C_d-g4gg.webp)

Supporting panes can appear beside or below the primary area

| Supporting pane placement | Pane width     | Breakpoint        |
| ------------------------- | -------------- | ----------------- |
| Below                     | Flexible       | Compact or Medium |
| Leading or trailing       | Fixed (360 dp) | Expanded          |

## Across breakpoints

### Compact

The supporting pane should appear below the focus pane. <br><br>A bottom sheet can be useful for keeping focus on the primary pane while providing access to supporting information.

![2 layouts showing bottom sheets at a compact breakpoint.](/assets/681304d5-mp73c5cw-04.CWd7P_cX.webp)

Bottom sheets can provide supporting information in compact windows

### Medium

The supporting pane should appear below the focus pane.

![3 cards in a supporting pane are horizontal across the bottom of a tablet.](/assets/990e35ad-mp54tfu7-05.6U3SbYev.webp)

Supporting panes appear below the focus pane in medium windows

### Expanded

The supporting pane should appear on the leading or trailing side of the focus pane.

![The supporting pane is to the right of the primary focus pane on 2 screens.](/assets/08189272-mp73dr78-6.DIQrQKKc.webp)

Supporting panes appear beside the focus pane in expanded windows