Context sheet

v4.0

A context sheet is an elevated, medium-attention surface. It can be modal or non-modal.

Considerations

Contextual

Context sheets are always tied to the screen or flow it supplements, like filters for a results list.

Flexible

The underlying screen remains visible and can remain interactive.

Lightweight but persistent

Stays open until dismissed or until the user completes their action.

Usage

Use for

Filtering or refining a search or browse experience.
Editing secondary settings that influence the main view.
Viewing or editing a listing preview from an elevated surface.

Don’t use

For critical, blocking tasks (use Focus sheet instead).
For quick, transient actions (use Menu instead).
For dense, persistent navigation (use a dedicated Navigation Rail).

Properties

Sheet

Context sheets inherit common properties and behaviors from the primitive sheet component.

Behavior

Presentation

Context sheets appear from the bottom on small screens and the trailing edge of larger screens.

Modality

A contextual sheet can be modal or non-modal.

Modal sheets use a scrim to block interaction with the main page.

Non-modal sheets allow simultaneous interaction with the sheet and main page surfaces. Non-modal sheets are best used for experiences that require a persistent but dismissible sheet that benefits from interacting with the main page, like viewing location details on a map.

Minimum sheet height

To maintain ergonomics and readability on smaller screens, context sheets have a minimum height of 200px. Content that doesn’t fill the space of a minimum sheet will have white space below the content area.

Navigation

Navigating within a context sheet should be avoided where possible. If navigating is necessary, keep it shallow – no more than 1 level deep.

When presenting a secondary view in a context sheet, the primary view content is replaced. The secondary view is dismissed by making a selection or pressing a backward navigation button.

Dismissing

Context sheets are dismissed by:

Pressing the close button
Interacting with the scrim (when present)
Swiping the container to the bottom of the screen
Pressing the escape button when the general sheet container is focused
Pressing a hardware back button or using a predicative back gesture

Device keyboards

Context sheets with input fields expand upward with the device keyboard when the field is focused. The sheet moves back down when the keyboard is collapsed.

iOS keyboard

Android keyboard

Screen size

Small screen

On small screens, the vertical height of a context sheet defaults up to 50% of the screen height. Scrolling the sheet first slides it to full height before the content area scrolls.

Medium and large screens

On larger screens, context sheets are fixed to the trailing edge of the screen. Content that extends beyond the vertical bounds of the sheet scrolls. The context sheet header and footer are pinned above the scrolled content.