Draggable Sheet

In this Example, you’ll learn to use the Page tool to create a sheet that can be dragged between an open and closed position.

About

The Draggable Sheet pattern is most often used to provide additional context while a user completes some primary task, such as completing a form or browsing a list. In the case of a form, a Draggable Sheet may provide help, tips, or more information about of the current step. For a list, a Draggable Sheet pattern might display filter and sort options, a shortlist, or the contents of the user’s shopping cart.

Tips

If the user will be comparing the items in the Draggable Sheet against items in the design’s main content area, be sure that both items are still visible when the menu is open. Use the Preview’s Device options to try out the interaction on different device sizes.

This pattern is closely related to the more common “bottom sheet” pattern that uses a modal overlay. For more on that pattern, see the Bottom Sheet example.