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.

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.