Drawer

Overview

This component appears over the parent page while optionally dimming it with a transparent backdrop. Drawers can be modal containers. Meaning they can disable all page functionality when they appear. And remain on screen until the required action has been completed or they are manually closed.

Modal drawers can be closed by:

1. Tapping the dimmed area, outside of the container.
2. Tapping the close action link.
3. Dragging it down (indicated by the grabber - see anatomy).

Drawers versus Overlayers

A drawer could be compared to an overlayer in the sense that it interrupts the current flow to:

1. Grab the user's attention
2. Get user input

There are two main differences:

1. A drawer can be nonmodal. Meaning that they can display contextual, complementary information or options while the user interacts with the parent page.
2. The anatomy of a drawer allows subflows to feel more comfortable, while making it clear that the user has not left the parent page. In other terms, it is preffered to use drawers for the completion of subflows. And overlayers to communicate critical information that can be acted upon or dismissed.

See our Overlayer article for more guidance on the component.

Anatomy

1. The grabber
   This serves as supplementary indication to communicate that the drawer can be dismissed by dragging it down.
2. Title section
   Simply communicates the title and subtitle (optional) of the subtask at hand.
3. Close button
   This button closes the drawer when tapped.
4. Drawer content
   This is where the users will interact with components to complete the subtask. This area could include anything from entrypoints, to input fields, to buttons, and so on. This is explained with further detail in the next section.
5. Backdrop (optional)
   A transparent backdrop is used when the drawer is modal to redirect the user's focus to the drawer, without hiding the context of the parent page.

Drawer content

Appropriate components to use in a dialog include form inputs and controls that aid in collecting information from the user. Other components like content switcher and structured list can be used to organize information. When possible, avoid using complex components that can complicate task completion or prolong a user's time in the modal.

A user's journey through the modal should be direct and short.

Avoid components that will direct the user away from the dialog

Avoid components like links that will take the user away from the current context and the task at hand. An overlayer's purpose is to focus the user's attention on a particular task and should not encourage any action that is not related to that task's completion.

Avoid complex interaction within a drawer

Information displayed to the user, and actions required from them within a drawer should remain basic. For example:

• Confirming an order (buttons)
• Filling in a form (input fields, selectable boxes, buttons, etc.)
• Performing supplementary actions (entrypoints, action links, etc.)

If the interactions are too complex to fit in such a subflow (e.g. complex tables), redirect the user to a Level 4 modal page instead. This is a fullscreen modal used for more complex interactions, without exiting the parent page. For more guidance on this topic, see our Mobile Apps Header article.

Behaviour

Nesting modals

A drawer should never cover an overlayer, but an overlayer may cover (and thus interrupt) a drawer subtask if, and only if, it requires a single interaction to complete.

For example: an overlayer appears when deleting an item from a list in a drawer. Here, the drawer demands user confirmation and is completed very quickly.

Position

Drawers are anchored to the bottom of the screen, making it easy to drag up and down with the thumb.

They have two possible positions: ajar and opened. The user can pull up an ajar drawer to get it opened, and vice versa. The component can be blocked into one of these positions, making it non draggable to the other position.

By default:

• A nonmodal drawer is ajar
• A modal drawer is opened

Ajar drawers should display relevant actions or information on top to make them accessible without having to pull the drawer up. Actions that are less relevant can be displayed once the user fully opens the drawer.

Scrolling and max height

Scrolling should be enabled on opened drawers only. Meaning that an ajar drawer containing lots of content would have to be opened first to be scrollable, since it is using the same vertical gesture.

Opened drawers take up most 90% of the height of the display. Leaving a small preview of the parent page visible.

Escaping drawers

Drawers may be dismissed by:

• Tapping the cancel button
• Tapping the close button
• Tapping outside of the drawer area
• Dragging the drawer down
• Completing the flow