---
url: /components/side-sheets/guidelines.md
description: >-
Side sheets are surfaces containing supplementary content or actions to
support tasks as part of a flow.
---
# Side sheets
Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.
[Overview](overview.md) · [Specs](specs.md) · **Guidelines** · [Accessibility](accessibility.md)
1. Standard side sheet
2. Modal side sheet
## Usage
Standard side sheets are supplementary surfaces used mostly in [medium](../../foundations/layout/breakpoints/medium.md "Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation.") to [expanded breakpoints,](../../foundations/layout/breakpoints/expanded.md "Window widths 840dp to 1199dp, such as a tablet or foldable in landscape orientation, or desktop.") like tablet and desktop. They provide a consistent and predictable surface for contextual actions and information.
Standard side sheets display content that complements the screen’s primary content. They remain visible while people interact with primary content.
Common uses include:
* Displaying a list of actions that affect the screen’s primary content, such as filters
* Displaying supplemental content and features
Information about a photo in a standard side sheet
Modal side sheets are preferred in [compact breakpoints](../../foundations/layout/breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation."), like mobile, due to limited screen size.
They can display the same kinds of content as standard side sheets, but must be dismissed in order to interact with the underlying content.
Modal side sheet with filter controls
Side sheets have a fixed width and typically span the height of the screen.
Their dimensions depend on how the app’s [layout](../../foundations/layout/layout-overview/overview.md "Layout is the visual arrangement of elements on the screen.") is subdivided into UI regions.
::: tip Do
Place side sheets along the edge of the screen, usually on the right side to avoid interference with any navigational components on the left edge. They can be slightly inset by 16dp.
:::
::: danger Don't
Don’t inset a side sheet from the screen edges far beyond the recommended margin. This makes the sheet’s position and scroll behavior unclear, while obscuring primary content.
:::
## Anatomy
1. Divider (optional)
2. Headline
3. Container
4. Close icon button
1. Back icon button (optional)
2. Headline
3. Container
4. Close icon button
5. Divider (optional)
6. Action buttons (optional)
7. Scrim
### Container
Side sheet containers hold all side sheet elements. Their size is determined by the space those elements occupy.
The container is the only required element of a side sheet.
1. Container
### Back icon button (optional)
[Icon buttons](../icon-buttons/overview.md "Icon buttons help people take minor actions with one tap.") can provide ways to exit a side sheet or move to a different experience.
Because the primary content behind or beside a side sheet is always visible, it’s important to provide affordances for leaving a side sheet and returning to the primary content.
1. Back icon button
### Close icon button (optional)
A close affordance provides a consistent method for dismissing a side sheet.
A close icon button is highly recommended, increases [accessibility](../../foundations/overview/principles.md "Accessible design makes products usable for people with all kinds of abilities."), and makes [focused](../../foundations/interaction/states/applying-states.md#bc6d6853-48ef-490e-8076-448e89e69f0f "A focused state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.") side sheets easier to close.
1. Close icon button
### Action buttons (optional)
[Buttons](../buttons/overview.md "Buttons let people take action and make choices with one tap.") represent actions available from a side sheet. Examples: **Save**, **Edit**, **Download**
Use [elevation](../../styles/elevation/overview.md "Elevation is the distance between two surfaces on the z-axis"), fill, and [tone](../../styles/color/system/how-the-system-works.md#dc7848f3-b094-4f9a-9e50-bfa5a5029617 "Tone is how light or dark a color appears. Tone is sometimes also referred to as luminance.") to call attention to specific actions.
1. Action buttons
### Divider (optional)
[Dividers](../divider/overview.md "Dividers are thin lines that group content in lists or other containers.") can separate different kinds of content and create distinct regions in a side sheet.
Use a divider to separate:
* Action buttons from content
* User-generated content from system-generated content
1. Divider
### Content (optional)
Side sheets can display a wide variety of content and [layouts](../../foundations/layout/layout-overview/overview.md "Layout is the visual arrangement of elements on the screen."), ranging from a [list](../lists/overview.md "Lists are continuous, vertical indexes of text and images.") of actions to supplemental content in a tabular layout.
Form controls shown in a side sheet for app settings
Modal side sheets on smaller screens can transition to standard side sheets at larger screen sizes
## Adaptive design
Side sheets have a default width, but can be resized depending on the needs of the [layout](../../foundations/layout/layout-overview/overview.md "Layout is the visual arrangement of elements on the screen.").
When a standard side sheet opens, the body area shrinks to accommodate the sheet’s width while maintaining a [margin](../../foundations/layout/layout-overview/overview.md#38a538d7-991f-4c39-8449-195d32caf397 "Margins are the spaces between the edge of a nested element and its parent element, such as the space between a button's label text and the edge of its container.") on the body’s trailing edge.
Entrance of standard side sheets will cause the body area to adjust and accommodate the new content
### RTL language support
In right-to-left (RTL) languages, side sheets should appear on the left edge of the window with all elements reversed.
Side sheet elements are reversed in RTL languages
## Behavior
Side sheets can vertically scroll independent of the rest of the UI.
This allows their scroll position and content to persist while the page is scrolled, and vice versa.
Side sheets cannot scroll horizontally.
::: tip Do
Side sheets can vertically scroll internally when their content exceeds the screen height
:::
::: danger Don't
Don’t allow horizontal scrolling or lay out the side sheet in a way that suggests horizontal scrolling. A side sheet’s narrow width leaves limited space to fully view items.
:::
### Predictive back
On Android, a [gesture](../../foundations/interaction/gestures.md "Gestures are all the ways people interact with UI elements using touch.") called [predictive back](https://github.com/material-components/material-components-android/blob/master/docs/foundations/PredictiveBack.md) allows a person to swipe left or right on the side sheet.
When predictive back is used:
* The side sheet detaches from the top and bottom edges of the screen to signal it will close
* The previous screen is revealed in a preview
* The side sheet and its content always scales in the direction of the gesture
[Find a list of compatible components](../../foundations/interaction/gestures.md#22462fb2-fbe8-4e0c-b3e7-9278bd18ea0d)
Preview of the result of the gestures: release to commit, fling to commit, and cancel