Skip to content
search icon
clear
Component Status

Side sheet

A side sheet is a a toggleable area that is anchored to the edge of the viewport with supplementary content.

Guidelines

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.

Don't

  • 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.

Variations

FigmaExternal linkFigma design for side sheet

Standard side sheet

Primarily used for desktop and tablet. The side sheet comes in multiple sizes: Small, Medium, Large, X Large.

Modal side sheet

Modular side sheets are used for mobile with the addition of a scrim.

Demo

Small

Children
✏️ Edit this page on GitHub