Skip to content

Side sheets ​

Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.

Overview · Specs · Guidelines · Accessibility

Side sheets

  • Use side sheets to provide optional content and actions without interrupting the main content
  • Two variants: standard and modal
  • People can navigate to another region within the sheet
  • Side sheets can contain a back icon for navigation

The 2 variants of side sheets.

  1. Standard side sheet
  2. Modal side sheet

Availability & resources ​

TypeResourceStatus
DesignDesign Kit (Figma)Available
ImplementationFlutterUnavailable
ImplementationJetpack ComposeUnavailable
ImplementationAndroid Views (MDC-Android)Available
ImplementationWebUnavailable

Differences from M2 ​

  • Right-to-left (RTL) language support with left side sheet
  • Color: New color mappings and compatibility with dynamic color
  • Shape: Modal side sheets have a 16dp corner radius

A modal side sheet showing the 16dp corner radius.

Side sheets have new color mappings to support dynamic color

Unofficial offline mirror. Content © Google, licensed under CC BY 4.0.