A side sheet is a a toggleable area that is anchored to the edge of the viewport with supplementary content.
Side sheets display content that is supplementary to the primary content. Side sheets can display a list of actions, filters, supplemental content and functionality. Content in side sheets can be broken into tabs.
Side sheets are not permanent so they should always have a way to be opened and closed. They are always to be anchored to the left of the viewport’s right edge. They are to be full height, but can start under the top bar if it is visible. Side sheets can be elevated over content using
Elevation/Overlay, or push primary content to share the same elevation.
- Do not use a left-anchored side sheet if using a Navigational Drawer.
- Do not change the width of the side sheet.
- Do not remove the close icon.
Standard side sheet
Primarily used for desktop and tablet. The side sheet comes in multiple sizes:
Modal side sheet
Modular side sheets are used for mobile with the addition of a scrim.