Drawers

Drawers do not take away any room from the content, but need an extra action to access, and should therefore not be used for controls that are part of an application’s main tasks.

Global drawer

Global drawer

The global drawer is used for global, context-independent controls.

  • The drawer is opened by an edge-swipe (the side is system-defined) and closed by swiping in the other direction or tapping outside of the panel
  • For the guidelines regarding its content, see global drawer.

Context drawer

Context drawer

The context drawer (the side is system-defined) is used for context-specific controls that affect only the currently selected object (e.g. copy, delete etc.).

  • The drawer is opened by an edge-swipe and closed by swiping in the other direction or tapping outside of the panel
  • For the guidelines regarding its content, see the context drawer.

Bottom drawer and dialog sheet

Bottom drawer

For a full modal dialog, use a dialog sheet. For a quick choice, use a bottom drawer.