Drawers are akin to dialogs in a number of ways.

Drawer versus Dialog

Although the drawer and dialog share a number of UI attributes, each has it's advantages.

Drawer Advantages

Because of these advantages, the drawer is often a more mobile-friendly UI alternative to the dialog.

Dialog Advantages

Because of these advantages, there are use cases for which a dialog is more appropriate than a drawer.


Illustration of an open, overlay-style drawer

Use Cases for Drawers

There are several use cases for which a drawer works well.

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).


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.


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.

This image shows a closed drawer, anchored on the right margin of the browser viewport.

Illustration of a closed drawer, which shows icons only for each tab, and they are displayed on the decorative background part of the page's righthand side, rather than in the viewport.

In the next image, a closed drawer is anchored to the margin of the browser viewport on a tablet.

Illustration of a closed drawer on a tablet, in which the tabs with icons are displayed within the area of the browser's viewpoart, on the righthand side ofthe page.

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.

 an open overlay-type drawer over a page.

In the following image, a drawer extends to the page footer.

An open drawer that stretches to the bottom of page. Image of the bottom area of a page, in which the open drawer rests on a line equal to the top of a page footer.

The image above shows an open drawer extending to the bottom of the page.

Additional Resources