# Supporting pane layout

> A primary pane with a secondary pane of related content next to it.

- Category: Layout and structure
- API status: Expressive
- Compose APIs: `SupportingPaneScaffold`, `AnimatedPane`, `rememberSupportingPaneScaffoldNavigator`
- Interactive page: https://m3e.ljzapps.app/#components/supporting-pane

## When to use

Use SupportingPaneScaffold when a screen has a main task and supporting information, such as a document with comments. On large windows both panes show side by side. On small windows the supporting pane moves below the main content or into a sheet.

## Examples

### Main with related content

Resize the window.

```kotlin
val navigator = rememberSupportingPaneScaffoldNavigator<Nothing>()

Box(Modifier.fillMaxWidth().height(340.dp)) {
    SupportingPaneScaffold(
        directive = navigator.scaffoldDirective,
        scaffoldState = navigator.scaffoldState,
        mainPane = {
            AnimatedPane {
                Box(Modifier.fillMaxSize().padding(24.dp), contentAlignment = Alignment.Center) {
                    Text("Main content", style = MaterialTheme.typography.headlineMedium)
                }
            }
        },
        supportingPane = {
            AnimatedPane {
                Box(Modifier.fillMaxSize()) {
                    androidx.compose.foundation.layout.Column {
                        listOf("Related article", "Comments", "Sources").forEach { label ->
                            ListItem(headlineContent = { Text(label) })
                        }
                    }
                }
            }
        },
    )
}
```

## Parameters

| Name | Type | Default | Description |
|---|---|---|---|
| `mainPane` | `@Composable ThreePaneScaffoldPaneScope.() -> Unit` |  | The primary content. |
| `supportingPane` | `@Composable ThreePaneScaffoldPaneScope.() -> Unit` |  | Related content. |
| `extraPane` | `@Composable (...)?` | `null` | Optional third pane. |

## Guidelines

Do:
- Keep the supporting pane optional for the task.
- Let people resize the panes on large windows.

Don't:
- Do not move required actions into the supporting pane.
- Do not use more than three panes.

## Accessibility

- Keep the reading order main first, then supporting, in every layout.

## Related components

- [List-detail layout](https://m3e.ljzapps.app/docs/components/list-detail.md)
- [Drag handle](https://m3e.ljzapps.app/docs/components/drag-handle.md)
- [Bottom sheet](https://m3e.ljzapps.app/docs/components/bottom-sheet.md)