<h2 id="listdetailpanescaffold-directive-value-listpane-detailpane-modifier-extrapane-paneexpansiondraghandle-paneexpansionstate">ListDetailPaneScaffold</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3AdaptiveApi
@Composable
fun ListDetailPaneScaffold(
    directive: PaneScaffoldDirective,
    value: ThreePaneScaffoldValue,
    listPane: @Composable ThreePaneScaffoldPaneScope.() -> Unit,
    detailPane: @Composable ThreePaneScaffoldPaneScope.() -> Unit,
    modifier: Modifier = Modifier,
    extraPane: (@Composable ThreePaneScaffoldPaneScope.() -> Unit)? = null,
    paneExpansionDragHandle: (@Composable ThreePaneScaffoldScope.(PaneExpansionState) -> Unit)? =
        null,
    paneExpansionState: PaneExpansionState? = null,
)
```

A three pane layout that follows the Material guidelines, displaying the provided panes in a
canonical
[list-detail layout](https://m3.material.io/foundations/layout/canonical-layouts/list-detail).

This overload takes a [ThreePaneScaffoldValue](/jetpack-compose/androidx.compose.material3.adaptive/adaptive-layout/classes/ThreePaneScaffoldValue) describing the adapted value of each pane within
the scaffold.

Here's a basic usage sample, which demonstrates how a layout can change from single pane to dual
pane under different window configurations:

For a more sophisticated sample that supports an extra pane and pane expansion functionality that
allows users to drag to change layout split, see:

By default there isn't a drag handle rendered so users aren't able to drag to change the pane
split. Providing a drag handle like the above sample shows will enable the functionality. We
suggest developers to use the vertical drag handle implementation provided by the Material3
component library here to have default theming/styling support. You can integrate the component
as the following sample shows:

Note that if there's no drag handle, you can still modify [paneExpansionState](/jetpack-compose/androidx.compose.material3.adaptive/adaptive-layout/classes/PaneExpansionState) directly to apply
pane expansion.

The following code gives a sample of how to integrate with the Compose Navigation library:

#### Parameters

| | |
| --- | --- |
| directive | The top-level directives about how the scaffold should arrange its panes. |
| value | The current adapted value of the scaffold, which indicates how each pane of the scaffold is adapted. |
| listPane | the list pane of the scaffold, which is supposed to hold a list of item summaries that can be selected from, for example, the inbox mail list of a mail app. See `ListDetailPaneScaffoldRole.List`. Note that we suggest you to use [AnimatedPane](/jetpack-compose/androidx.compose.material3.adaptive/adaptive-layout/composable-functions/AnimatedPane) as the root layout of panes, which supports default pane behaviors like enter/exit transitions. |
| detailPane | the detail pane of the scaffold, which is supposed to hold the detailed info of a selected item, for example, the mail content currently being viewed. See `ListDetailPaneScaffoldRole.Detail`. Note that we suggest you to use [AnimatedPane](/jetpack-compose/androidx.compose.material3.adaptive/adaptive-layout/composable-functions/AnimatedPane) as the root layout of panes, which supports default pane behaviors like enter/exit transitions. |
| modifier | [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) of the scaffold layout. |
| extraPane | the extra pane of the scaffold, which is supposed to hold any supplementary info besides the list and the detail panes, for example, a task list or a mini-calendar view of a mail app. See `ListDetailPaneScaffoldRole.Extra`. Note that we suggest you to use [AnimatedPane](/jetpack-compose/androidx.compose.material3.adaptive/adaptive-layout/composable-functions/AnimatedPane) as the root layout of panes, which supports default pane behaviors like enter/exit transitions. |
| paneExpansionDragHandle | the pane expansion drag handle to allow users to drag to change pane expansion state, `null` by default. |
| paneExpansionState | the state object of pane expansion; when no value is provided but `paneExpansionDragHandle` is not `null`, a default implementation will be created for the drag handle to use. |

<hr class="docs-overload-divider">

<h2 id="listdetailpanescaffold-directive-scaffoldstate-listpane-detailpane-modifier-extrapane-paneexpansiondraghandle-paneexpansionstate">ListDetailPaneScaffold</h2>

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3AdaptiveApi
@Composable
fun ListDetailPaneScaffold(
    directive: PaneScaffoldDirective,
    scaffoldState: ThreePaneScaffoldState,
    listPane: @Composable ThreePaneScaffoldPaneScope.() -> Unit,
    detailPane: @Composable ThreePaneScaffoldPaneScope.() -> Unit,
    modifier: Modifier = Modifier,
    extraPane: (@Composable ThreePaneScaffoldPaneScope.() -> Unit)? = null,
    paneExpansionDragHandle: (@Composable ThreePaneScaffoldScope.(PaneExpansionState) -> Unit)? =
        null,
    paneExpansionState: PaneExpansionState? = null,
)
```

A three pane layout that follows the Material guidelines, displaying the provided panes in a
canonical
[list-detail layout](https://m3.material.io/foundations/layout/canonical-layouts/list-detail).

This overload takes a [ThreePaneScaffoldState](/jetpack-compose/androidx.compose.material3.adaptive/adaptive-layout/classes/ThreePaneScaffoldState) describing the current [ThreePaneScaffoldValue](/jetpack-compose/androidx.compose.material3.adaptive/adaptive-layout/classes/ThreePaneScaffoldValue)
and any pane transitions or animations in progress.

Here's a basic usage sample, which demonstrates how a layout can change from single pane to dual
pane under different window configurations:

For a more sophisticated sample that supports an extra pane and pane expansion functionality that
allows users to drag to change layout split, see:

By default there isn't a drag handle rendered so users aren't able to drag to change the pane
split. Providing a drag handle like the above sample shows will enable the functionality. We
suggest developers to use the vertical drag handle implementation provided by the Material3
component library here to have default theming/styling support. You can integrate the component
as the following sample shows:

Note that if there's no drag handle, you can still modify [paneExpansionState](/jetpack-compose/androidx.compose.material3.adaptive/adaptive-layout/classes/PaneExpansionState) directly to apply
pane expansion.

The following code gives a sample of how to integrate with the Compose Navigation library:

#### Parameters

| | |
| --- | --- |
| directive | The top-level directives about how the scaffold should arrange its panes. |
| scaffoldState | The current state of the scaffold, containing information about the adapted value of each pane of the scaffold and the transitions/animations in progress. |
| listPane | the list pane of the scaffold, which is supposed to hold a list of item summaries that can be selected from, for example, the inbox mail list of a mail app. See `ListDetailPaneScaffoldRole.List`. Note that we suggest you to use [AnimatedPane](/jetpack-compose/androidx.compose.material3.adaptive/adaptive-layout/composable-functions/AnimatedPane) as the root layout of panes, which supports default pane behaviors like enter/exit transitions. |
| detailPane | the detail pane of the scaffold, which is supposed to hold the detailed info of a selected item, for example, the mail content currently being viewed. See `ListDetailPaneScaffoldRole.Detail`. Note that we suggest you to use [AnimatedPane](/jetpack-compose/androidx.compose.material3.adaptive/adaptive-layout/composable-functions/AnimatedPane) as the root layout of panes, which supports default pane behaviors like enter/exit transitions. |
| modifier | [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) of the scaffold layout. |
| extraPane | the extra pane of the scaffold, which is supposed to hold any supplementary info besides the list and the detail panes, for example, a task list or a mini-calendar view of a mail app. See `ListDetailPaneScaffoldRole.Extra`. Note that we suggest you to use [AnimatedPane](/jetpack-compose/androidx.compose.material3.adaptive/adaptive-layout/composable-functions/AnimatedPane) as the root layout of panes, which supports default pane behaviors like enter/exit transitions. |
| paneExpansionDragHandle | the pane expansion drag handle to allow users to drag to change pane expansion state, `null` by default. |
| paneExpansionState | the state object of pane expansion; when no value is provided but `paneExpansionDragHandle` is not `null`, a default implementation will be created for the drag handle to use. |