Usage
Side sheets are supplementary surfaces primarily used on tablet and desktop. They come in two types:
Standard side sheets
Standard side sheets display content that complements the screen’s primary content. They remain visible while users 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
Modal side sheets
Modal side sheets are used on mobile instead of standard side sheets, due to limited screen size. They can display the same types of content as standard side sheets, but must be dismissed in order to interact with the underlying content.
Principles
Supporting
Side sheets contain content that supplements the screen’s primary UI region.
Flexible
Side sheets display a wide variety of content and layouts.
Contextual
Side sheets can be visible or hidden based on screen size or user need, and they often become bottom sheets on mobile.
Anatomy
Sheet
Side sheets are anchored to the left or right edge of the screen. They are a fixed width and typically span the height of the...
Side sheets are anchored to the left or right edge of the screen. They are a fixed width and typically span the height of the screen. Their dimensions depend on how the app’s layout is subdivided into UI regions.
Contents
Side sheets can display a wide variety of content and layouts, ranging from a list of actions to supplemental content in a tabular layout.
Side sheets can display a wide variety of content and layouts, ranging from a list of actions to supplemental content in a tabular layout.
Behavior
Scrolling
Side sheets can be vertically scrolled independent of the rest of the UI. This allows their scroll position and contents to persist while the page...
Side sheets can be vertically scrolled independent of the rest of the UI. This allows their scroll position and contents to persist while the page is scrolled, and vice versa.
Side sheets cannot be horizontally scrolled.
Scaling and adaptation
A side sheet can be used to show and hide additional content. A side sheet is not fixed in size when aligned to the trailing edge of a layout.
A side sheet can be used to show and hide additional content. A side sheet is not fixed in size when aligned to the trailing edge of a layout.
Adjust the body to fit the side sheet
When the side sheet opens, the body area shrinks to accommodate the sheet’s width while maintaining a 48dp margin on the body’s trailing edge.
When adapting layouts for larger screens, bottom sheets can be swapped for side sheets to reduce the amount of space occupied on larger screens.
Placement
Screen size
Side sheets that are modal on mobile, due to limited screen width, can become standard side sheets on tablet and desktop. The reverse is also...
Side sheets that are modal on mobile, due to limited screen width, can become standard side sheets on tablet and desktop. The reverse is also true.
Pairing with navigation drawers
Side sheets should be placed on the opposite side of a side navigation drawer to avoid obstructing the UI or causing confusion about the sheet’s...
Side sheets should be placed on the opposite side of a side navigation drawer to avoid obstructing the UI or causing confusion about the sheet’s functionality.
Navigation drawers are anchored to the left screen edge in left-to-right languages, and on the right for right-to-left languages.
Standard side sheet
Usage
Standard side sheets co-exist with the screen’s primary UI region, which allows viewing and interaction with both surfaces. They are used only on tablet and...
Standard side sheets co-exist with the screen’s primary UI region, which allows viewing and interaction with both surfaces. They are used only on tablet and desktop.
Standard side sheets are commonly used for:
- Keeping a feature or content on-screen, if the primary UI region is frequently scrolled or panned
- Contextual actions that affect the primary region, such as filters
- Supporting information or metadata, such as location or photo details
- Short tasks that can be accomplished in a single screen, such as configuring options or specifying item details before making a purchase
Behavior
Standard side sheets that aren’t permanent should include affordances to open and close the sheet. Common open affordances include action icons in top app bars...
Opening and closing
Standard side sheets that aren’t permanent should include affordances to open and close the sheet.
Common open affordances include action icons in top app bars or buttons in the screen layout. While a single affordance can be used to toggle the visibility of the sheet on or off, a separate close affordance within the sheet is recommended.
Placement
Standard side sheets can be set at the same elevation as the main content or placed above it, at 8dp. Their elevation can be used...
Elevation
Standard side sheets can be set at the same elevation as the main content or placed above it, at 8dp.
Their elevation can be used to indicate their hierarchical relationship to content or affect its behavior in the layout grid.
Coplanar elevation
Coplanar elevation places the sheet at the same elevation as content, indicating the two surfaces are related and of equal importance. Coplanar sheets affect the layout grid and shrink the available area for content.
Above content
When the standard side sheet is elevated above content, it can indicate hierarchical meaning or simply be for layout purposes. Surfaces elevated in front of others often convey more importance or control over those behind them. They don’t affect the layout grid, and should only be used for temporarily visible sheets since they obscure content.
Modal side sheet
Usage
Modal side sheets present content while blocking interaction with the rest of the screen. On mobile, they are used instead of standard side sheets. On...
Modal side sheets present content while blocking interaction with the rest of the screen.
On mobile, they are used instead of standard side sheets. On larger screens, they can help focus a user’s attention on a key flow, such as making a purchase.
Behavior
Modal side sheets have a default elevation of 16dp. This elevation allows them to appear over all UI elements. A modal side sheet places all...
Elevation and scrim
Modal side sheets have a default elevation of 16dp. This elevation allows them to appear over all UI elements.
A modal side sheet places all content and UI elements behind a scrim, which indicates that they will not respond to user interaction. Tapping the scrim dismisses both the modal side sheet and scrim from view.
Control
Modal side sheets appear when triggered by a user action, such as tapping a button or action icon in a top app bar. They can be dismissed by:
- Tapping the scrim
- Swiping towards the sheet’s anchoring edge (left or right)
- Using a close affordance within the side sheet’s header, if available
Theming
Crane Material Theme
This travel app’s side sheets have been customized using Material Theming, specifically using customized color. Crane is a travel app that uses Material Design components...
This travel app’s side sheets have been customized using Material Theming, specifically using customized color.
Color
Crane’s side sheets use custom color on three elements: the container, text, and selection controls.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Surface | Color Opacity |
#FFFFFF 100% |
Text | On Surface | Color Opacity |
#000000 100% |
Selection controls | Secondary | Color Opacity |
#E30425 100% |
Specs
Modal side sheet (Mobile)
- 40 Measurement 40
- 16 Measurement 16
- 56 Measurement 56
- 56 Measurement 56
#00051
R0 G5 B1
- General
Scrim
#000000 Opacity:32%
Standard side sheet (Desktop)
- 320 Measurement 320
- 44 Measurement 44
- 20 Measurement 20
- 16 Measurement 16
- 64 Measurement 64
- 16 Measurement 16
- 2424
#00089
R0 G8 B9
- General
Width
Set the width of side sheets by using increments of the height of a top app bar