Use a dialog.side-sheet for optional content and
actions so the main view stays put. It docks to the trailing edge
by default. Add .start to dock it to the leading edge.
A back icon lets people move to another region inside the sheet.
Tokens follow the
M3 side sheet spec.
The container is surface-container-low, 400dp wide,
full height. A <header> is the 64dp top bar:
optional back, a title-large headline, and a close
control. A last-child <form method="dialog">
is the action row.
The sheet has two variants:
-
Standard. Open it with
show(). It has no scrim and a 1dp divider on the inner edge. The page stays interactive. Use it next to the main pane on large windows. -
Modal. Open it with
showModal(). A scrim sits beside the sheet and the page is inert. Inner corners are 28dp. To dismiss it, tap the scrim, drag the inner edge out, or use the close control.
<dialog class="side-sheet" aria-labelledby="headline-title">
<header>
<h2 id="headline-title">Headline</h2>
<form method="dialog">
<button type="submit" aria-label="Close">
<span class="material-symbols" aria-hidden="true">close</span>
</button>
</form>
</header>
<div>…</div>
</dialog>
The modal variant has no extra class. Call
showModal() or show() to pick the variant.
The sheet docks to the logical end edge by default. Add
.start to dock it to the logical start edge.
Everything mirrors in RTL, including dragging and opening motion.
A recent flick toward the docked edge dismisses the sheet. On a
short drag, pause for at least 100ms or reverse direction and the
sheet snaps back.
Header and back
The header is 64dp tall, with 24dp from the start to the headline, 12dp between the headline and close, and 24dp from the close icon to the trailing edge. Put a back button first when the sheet has more than one region. The back button does not close the sheet unless you wire it to.
<header>
<button type="button" aria-label="Back">
<span class="material-symbols" aria-hidden="true">arrow_back</span>
</button>
<h2>Headline</h2>
<form method="dialog">
<button type="submit" aria-label="Close">
<span class="material-symbols" aria-hidden="true">close</span>
</button>
</form>
</header>Layout
Standard sheets sit on large windows beside the main pane. Use modal sheets on compact and medium windows, or any time the sheet should take focus. On small screens a bottom sheet is often a better fit.
Body content scrolls independently. Keep a named close control in the header so dismissal never requires dragging. Long headings and action rows wrap. Test your translations with enlarged text and native zoom.
The sheet slides in, and snaps back after a short drag, on the default spatial spring. --md-comp-side-sheet-motion and --md-comp-side-sheet-motion-duration read --md-sys-motion-spring-default-spatial and its -duration token, so motion="expressive" gives it a slight bounce. The sheet extends 24px past its docked edge, so the bounce never uncovers the page there. When the user requests reduced motion, the sheet appears without moving.