SideSheet

Side sheets present modal supporting content from the side of the viewport using the native <dialog> element. Page scrolling behind the sheet is locked by default while it is open.

Details

Side sheets display supplemental content without leaving the current page.

Close lifecycle

update:open(false) and close run when the native dialog closes. Use closed for cleanup that must wait until the sheet is no longer visible. It is emitted after the SideSheet-owned exit motion, including its backdrop, finishes and receives the same native dialog return value as close. It does not wait for animations inside slot content. With no motion or reduced motion, it follows asynchronously without a business timeout.

<SideSheet v-model:open="open" @closed="selectedItem = null">
  {{ selectedItem?.name }}
  <template #actions>
    <Button variant="text" @click="open = false">Close</Button>
  </template>
</SideSheet>

Keep content or payload state intact in close and while setting open to false; clear it from closed.

Layout

The dialog root owns viewport placement and motion. The sheet surface owns the background, shape, and elevation. Default spacing is applied to the headline, content, and actions parts instead of the surface, so custom full-bleed content can opt out by overriding the relevant part padding.

Scrollable content also preserves common descendant visual overflow at its block edges. See Scrollable Content Visual Overflow for the shared surface contract and its customization token.

Examples

Default

Details

Side sheets display supplemental content without leaving the current page.

Start Side

Navigation

Start-side sheets are useful for app-level navigation or persistent context.

Detached

Places

Detached side sheets keep space around the surface while staying aligned to the viewport side.

Reference

Anatomy

Highlight

Element	Part	Selector
<dialog>	root	[data-scope="side-sheet"][data-part="root"] left_clickLMBCopy
<div>	surface	[data-scope="side-sheet"][data-part="surface"] left_clickLMBCopy
<h2>	headlineconditional	[data-scope="side-sheet"][data-part="headline"] left_clickLMBCopy
<div>	contentconditional	[data-scope="side-sheet"][data-part="content"] left_clickLMBCopy
<div>	actionsconditional	[data-scope="side-sheet"][data-part="actions"] left_clickLMBCopy

Props

Name	Description	Default	Control
shapeOptional	Corner style; inherits the shared shape default. M3Shape | undefined	-	-
closeOnBackdropOptional	Whether clicking the backdrop closes the sheet. boolean | undefined	true	check
lockScrollOptional	Whether page scrolling behind the sheet is locked while open. boolean | undefined	true	check
sideOptional	Which viewport side the sheet enters from. startend	"end"	startcheckend
variantOptional	Sheet visual style. dockeddetached	"docked"	checkdockeddetached
widthOptional	Sheet surface width. Such as '20rem'. string | undefined	undefined
openOptional	- boolean | undefined	false

Events4

Name	Type	Description
close	[returnValue: string]	-
update:open	[value: boolean]	-
cancel	[event: Event]	-
closed	[returnValue: string]	-

Slots3

Name	Parameters	Description
headline	-	Optional sheet headline.
default	-	Sheet body content.
actions	-	Optional action row.

Styling23

Preview

Token	Description
--md-sheet-side-detached-container-shapeShape Fallbackvar(--md-shape-popover)	Controls side detached container shape.
--md-sheet-side-docked-container-heightLayout Fallback100%	Controls side docked container height.
--md-sheet-side-docked-container-shapeShape Fallbackvar(--md-shape-docked)	Controls side docked container shape.
--md-sheet-side-docked-container-widthLayout Fallback16rem	Controls side docked container width.
--md-sheet-side-docked-divider-colorColor Fallbackvar(--md-sys-color-outline)	Controls side docked divider color.
--md-sheet-side-docked-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls side docked focus indicator color.
--md-sheet-side-docked-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls side docked focus indicator outline offset.
--md-sheet-side-docked-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls side docked focus indicator thickness.
--md-sheet-side-docked-headline-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls side docked headline color.
--md-sheet-side-docked-headline-fontTypography Fallbackvar(--md-sys-typescale-title-large-font)	Controls side docked headline font.
--md-sheet-side-docked-headline-line-heightTypography Fallbackvar(--md-sys-typescale-title-large-line-height)	Controls side docked headline line height.
--md-sheet-side-docked-headline-sizeLayout Fallbackvar(--md-sys-typescale-title-large-size)	Controls side docked headline size.
--md-sheet-side-docked-headline-trackingTypography Fallbackvar(--md-sys-typescale-title-large-tracking)	Controls side docked headline tracking.
--md-sheet-side-docked-headline-typeTypography Fallbackvar(--md-sys-typescale-title-large)	Controls side docked headline type.
--md-sheet-side-docked-headline-weightTypography Fallbackvar(--md-sys-typescale-title-large-weight)	Controls side docked headline weight.
--md-sheet-side-docked-modal-container-colorColor Fallbackvar(--md-sys-color-surface-container-low)	Controls side docked modal container color.
--md-sheet-side-docked-modal-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls side docked modal container elevation.
--md-sheet-side-docked-modal-container-shapeShape Fallbackvar(--md-shape-docked-modal)	Controls side docked modal container shape.
--md-sheet-side-docked-standard-container-colorColor Fallbackvar(--md-sys-color-surface)	Controls side docked standard container color.
--md-sheet-side-docked-standard-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls side docked standard container elevation.
--md-side-sheet-closed-translateStyle Fallback100%	Controls closed translate.
--md-side-sheet-detached-gapLayout Fallback1rem	Controls detached gap.
--md-side-sheet-widthLayout Fallbackvar(--md-sheet-side-docked-container-width,16rem)	Controls width.