Mountains
Feed item 1
Canonical layouts
List-detail and supporting pane (COMPONENT_SPEC §16a; Compose ListDetailPaneScaffoldand SupportingPaneScaffold) and the feed (m3.material.io). Each layout sizes itself by its own width (a container query on .m3e-layout), so it adapts inside a navigation suite's content area or any pane. Pick a frame width below, or resize the window.
Pane counts follow m3.material.io's Breakpoints by default (owner decision, 2026-10-18): two panes at large, three from extra-large. Compose's calculatePaneScaffoldDirective allows three from large; opt into it with pane-rule="compose" (elements), paneRule="compose" (React) or .m3e-pane-scaffold--compose (CSS).
| Width | m3.material.io (default) | Compose (pane-rule="compose") |
|---|---|---|
| compact, medium (< 840px) | 1 | 1 |
| expanded (840–1199px) | 2 | 2 |
| large (1200–1599px) | 2 | 3 |
| extra-large (≥ 1600px) | 3 | 3 |
List-detail (element)
<m3e-list-detail-layout> with slot="list", slot="detail" and slot="extra" children. A click on an element with data-pane-navigate="detail" navigates there (Compose's navigator navigateTo); data-pane-navigate="back" goes back and hides while there is nothing to go back to. Focus moves to the new pane, and back to the item. The handle between two panes drags the split (←/→, Home / End, Enter).
Select an item from the list.
Extra content about the message.
Supporting pane (element)
<m3e-supporting-pane-layout>: the main pane, with the supporting pane beside it from 840px; below that it reflows under the main pane when the layout is at least 900px tall (Compose's default AdaptStrategy.Reflow), else it is a destination of its own.
The main pane holds the primary content; the supporting pane adds related material.
Brunch this weekend?
Summer BBQ
Oui oui
React
useListDetailPaneScaffoldNavigator() (Compose rememberListDetailPaneScaffoldNavigator) and <ListDetailPaneScaffold navigator listPane detailPane extraPane>; the list marks the selected item only while the detail pane is expanded beside it, as the Compose sample does.
Inside a navigation suite
The layout reads its own width, not the window's: here it sits in the content area beside an expanded rail, so a 1000px frame leaves it under 840px and it shows one pane where the layouts above show two.
The message.
No JavaScript
.m3e-layout > .m3e-pane-scaffold--list-detail with the panes as regions; the container queries show the destination (data-destination, here the detail) below 840px, two panes from 840px and three from 1600px (.m3e-pane-scaffold--compose: from 1200px).
Ali Connors
Sandra Adams
Trevor Hansen
Shown on its own below 840px.
From 1600px.
Feed
.m3e-layout > .m3e-feed (React <FeedLayout>): one column below 600px, then as many columns as fit, with 16 / 24dp margins (m3.material.io). .m3e-feed__item--wide spans two columns. Compose has no feed scaffold; the gap and the column width are project defaults until m3.material.io states them.
Coast
Feed item 2
Forest
Feed item 3
Desert
Feed item 4
City
Feed item 5
Lakes
Feed item 6
Islands
Feed item 7
Sources
androidx Compose Material3 adaptive (1.4.0-alpha03) at 19991f2c: ThreePaneScaffold.kt, ThreePaneScaffoldValue.kt, ListDetailPaneScaffold.kt, SupportingPaneScaffold.kt, PaneScaffoldDirective.kt, PaneMotion.kt, Pane.kt, PaneExpansionState.kt, ThreePaneScaffoldNavigator.kt and ThreePaneScaffoldSample.kt; material3 DragHandle.kt. m3.material.io Breakpoints, Scaffold and Canonical examples (feed, pane counts, margins).