Contents
Overview
Drawers are akin to dialogs in a number of ways.
- Like dialogs, drawers are transient. The user opens a drawer to perform one or more actions and then closes the drawer.
- Drawers, like dialogs, may be displayed inline or may overlay page content.
- A drawer may have multiple tabs, just as dialogs do.
Drawer versus Dialog
Although the drawer and dialog share a number of UI attributes, each has it's advantages.
Drawer Advantages
- Users are not required to pan, resize, or reposition a drawer to see its content, as they are with dialogs.
- The drawer can share the same vertical scrollbar as the parent page when needed. This provides a simpler interaction model.
Because of these advantages, the drawer is often a more mobile-friendly UI alternative to the dialog.
Dialog Advantages
- Dialogs are more space efficient than drawers for presenting messages. For example, a confirmation message or error message in a dialog uses less page "real estate" than a drawer.
- Dialogs can appear anywhere on a page, whereas, drawers can appear only from the page margins. For example, dialogs can be adjacent to an input field to present user assistance.
- A user can often reposition a dialog to reveal page content beneath it, whereas, with a drawer, the user is required to close the drawer to reveal obscured content.
Because of these advantages, there are use cases for which a dialog is more appropriate than a drawer.
Use Cases for Drawers
There are several use cases for which a drawer works well.
- The drawer is a popular means of presenting navigation choices.
- The UI contained within a drawer can provide a convenient means of updating the content of the parent page. For example, if a user is shopping for a car, the feature options chosen from a drawer (such as sunroof or heated seats) will update the configuration and price of the car displayed on the parent page.
- The drawer is a convenient means of showing auxiliary page content, which provides more page room for the main content.
- Drawers are also incorporated within the off-canvas responsive design technique.
- The drawer can serve in the same capacity as a splitter to divide content on the parent page. For example, a left margin drawer may hold navigation choices and a right margin drawer may hold auxiliary content. Like the splitter, the drawer opens and closes, but unlike the splitter, the drawer does so without resizing the parent page content.
Neither a drawer nor a dialog is the best option for context-driven content, because some portion of the parent page is obscured when a drawer or dialog is used. Context-driven content is best presented in the ancillary area of the parent page, where it won't obscure information on the parent page.
Elements and Appearance
The main features of a drawer are its type (overlay mode or inline mode), its closing method (explicit or implicit), and interaction (modal or modeless).
Overlay and Inline
An overlay drawer appears to "slide over" the content on the parent page, obscuring some of that content.
An inline drawer appears to "push" the content on the parent page out of view as the drawer opens.
In both cases, the width of a drawer that travels along the x-axis is as wide as its content; the user is never required to scroll the content of the drawer horizontally.
Close Behavior
The drawer always requires an explicit opening, but teams can choose from three different methods to trigger the drawer to close.
The action to close a drawer is by explicit control, an implicit action, or both — unlike other disclose controls (such as a splitter, accordion, or headers).
- A drawer may close only by an explicit control. For example, a user must click or touch on an icon, a button, or a tab to close the drawer.
- A drawer may close only by an implicit action. For example, a user can only close a drawer by clicking or touching a navigation control within the drawer, or by touching anywhere outside of the drawer.
- A drawer may close by both an explicit control or an implicit action. For example, a user can close a drawer by a click or touch on an explicit control (such as the drawer tab), or close it implicitly by clicking a navigation link inside the drawer or clicking anywhere outside of the drawer.
Interaction
When a drawer opens, it is a design choice whether the user can take any action outside of the drawer.
When no action is allowed other than an implicit Close, the interaction is modal. As with a modal dialog, the only effective action the user can take (for example, navigation, UI state change, data update), is inside the drawer. As with the modal dialog, the UI may present a "smoked glass" overlay outside of the drawer to communicate to the user that the state of the UI is modal. However, this may be unnecessary if coupled with the right Close method for the drawer.
When an action is allowed outside of an open drawer, the interaction is modeless. This is identical to a modeless dialog interaction, such as a chat dialog. A common use case is the "property" drawer. An example is a car-buying application where the options selected in a drawer (such as sun roof or fog lights) will update the configuration and price of the car displayed on the parent page. The user may then manipulate the car on the parent page (pan, zoom, rotate), while the drawer remains open for other options. The explicit Close method is always used with a modeless interaction.
Heuristics
Use cases should drive the UI decision about when to use a particular type (overlay or inline mode), Close method, or interaction for a drawer. The following table offers heuristics to guide which attributes of a drawer to use, based upon the drawer's location.
| Drawer Location | Navigation Allowed | Task-Driven Content | Type | Close Behavior | Interaction |
| ANCILLARY CONTENT AREA | No | No | Either | Explicit | Either |
| ANCILLARY CONTENT AREA | No | Yes | Inline | Explicit | Modeless |
| NAVIGATION AREA | Yes | No | Either | Implicit | Modal |
| NAVIGATION AREA | No | Yes | Overlay | Explicit | Modeless |
| FOOTER AREA | No | No | Overlay | Explicit | Either |
| FOOTER AREA | No | Yes | Overlay | Explicit | Modeless |
Heuristic Examples
When the content of the drawer includes navigation controls, it is best that the drawer opens inline or overlays, closes implicitly, and the interaction is modal.
When the content of the drawer is driven by the context of the parent page — such as help content — then it is best that the drawer Close is explicit (for example, drawer tab). The type and interaction is whichever fits best.
When a drawer is placed in the ancillary area, it contains no navigation controls, and closes explicitly.
Positioning a Drawer
When a drawer is placed in either the Navigation or Ancillary Area, anchor its start position on the margin of the browser viewport.
- To accommodate the drawer tabs, the margin is a minimum of 36px wide.
This image shows a closed drawer, anchored on the right margin of the browser viewport.
In the next image, a closed drawer is anchored to the margin of the browser viewport on a tablet.
When a drawer opens, the width of a drawer traveling along the x-axis is as wide as its content. It is positioned below the Branding Area and extends to the bottom of the page or the page footer, whichever is present.
In the following image, a drawer extends to the page footer.
The image above shows an open drawer extending to the bottom of the page.
Additional Resources
Demos: