Side sheets

Side sheets (COMPONENT_SPEC §31) show supplementary content anchored to the end edge of the window (the left edge in right-to-left languages). Compose Material3 has no side sheet, so m3.material.io is the only reference (D8); the values it leaves open are the owner's picks (SOURCES register #78–#81, DECISIONS D19). The standard side sheet sits next to the main content and narrows it while open; the modal side sheet is a dialog over a 32% scrim that has to be dismissed before the page can be used again. The adaptive variant is modal below 600dp (the medium window size class) and standard from it.

The sheet is 256dp wide by default (the token DB's docked width; set --m3e-comp-side-sheet-container-width, up to 400dp). The standard sheet takes surface, the modal sheet surface-container-low with 16dp corners on its open side and a level 1 shadow. The header has an optional back button, the headline (title large) and the close button that m3.material.io requires; optional action buttons sit at the bottom. Sheets open on the default spatial spring and close on the fast effects spring, the navigation drawer's motion mirrored to the end edge (there are no drags). The close button and Escape close a sheet; the scrim closes a modal one.

Standard side sheet (element)

<m3e-side-sheet headline="Title" open> as the last child of a flex row: opening it takes its width from the row, so the content beside it shrinks instead of being covered. Its content scrolls on its own. divider draws the line along its start edge (outline-variant, the divider token and the standard sheet's color legend).

Main content

Side sheets hold supplementary content and actions next to the main content.

Use them for filters, details about a selected item, or settings that affect the screen.

Side sheets hold supplementary content and actions next to the main content.

Use them for filters, details about a selected item, or settings that affect the screen.

Side sheets hold supplementary content and actions next to the main content.

Use them for filters, details about a selected item, or settings that affect the screen.

Back button and actions

back-button adds the back icon button (it fires back; the back attribute is its deprecated name, since 1.8, removed in 2.0); children with slot="actions" are the bottom actions, start-aligned.

Main content

<m3e-side-sheet variant="modal">: show() opens it over the scrim. The page is inert while it is open, Tab stays inside, focus moves to its first button and returns to the opener when it closes. detached insets it by 16dp with all corners rounded; divider separates the actions.

Side sheets hold supplementary content and actions next to the main content.

Use them for filters, details about a selected item, or settings that affect the screen.

Adaptive

variant="adaptive" follows the window size class: from 600dp it is a standard sheet (as here on a wide window), below it a modal one (m3.material.io: standard sheets are for medium and expanded windows, modal ones for compact windows). It switches when the window crosses 600dp and stays open.

Main content

Side sheets hold supplementary content and actions next to the main content.

Use them for filters, details about a selected item, or settings that affect the screen.

A tooltip on the close button

Compose builds a tooltip into a few buttons only (owner decision M9 #30); it has no side sheet, so the close and back buttons have none. A page can add one: <m3e-tooltip> with its anchorElement set to the sheet's .m3e-side-sheet__close button (React: wrap your own trigger in <TooltipTrigger>). Hover the close button of the first sheet on this page.

Close

React

<SideSheet variant isOpen onOpenChange headline backButton onBack detached divider actions> renders the same DOM as the element (variant is a SideSheetVariantOption: 'standard' | 'modal' | 'adaptive'). onOpenChange(false) reports the close button, Escape and the scrim.

Sources

m3.material.io Side sheets, the only fidelity reference (DECISIONS D8; page 040dabe3-ed0f-4759-824d-812224e78af3: Overview, Specs tables, color legends and redlines, Guidelines, Accessibility) and its token DB (TOKEN_TABLE.06c2c925cf96adca, md.comp.sheet.side), generated into components/side-sheet-defaults.css (lines in PARITY.md).

androidx Compose Material3 1.5.0-beta01 (19991f2c), for what m3.material.io leaves open: NavigationDrawer.kt (the open and close springs L354–355 and the scrim L388–393, mirrored to the end edge), AlertDialog.kt (the 8dp between actions), ScrimTokens.kt, DividerTokens.kt (L24–25: the divider is outline variant, as the standalone md.comp.divider.color and the standard sheet's color legend) and SmallIconButtonTokens.kt.

SOURCES register #48 and #78–#81: the 256dp width (DECISIONS D19 (15)), the divider color (D19 (16)), the drawer motion (D19 (17)) and the header and actions geometry (D19 (18)); the focus order, first stop the back button (D20 (8)).