Drawers

A Drawer is a panel that slides in and out from the right. It’s used to help users complete a task faster and in context, such as to add charges or attachments to a transaction or to complete a quick sub-task.

Web

When to Use

Drawers come in two sizes, each with a specific purpose:

  • The 565px drawer is used to create/edit entities (think customers, products, appointments), or customize settings in any context.
  • The 265px drawer is used to add existing items to a transaction (in a trowser).

565px Create/Edit drawer

  • The task is either creating or editing an entity or customizing the page below.
  • It’s important to stay in context and the sub-task is too complicated for a popover.
  • The same form can be used in multiple places, i.e. on a trowser or on a page with a stage.
drawerintrowser

EXAMPLE OF 565PX DRAWER

diagram-multiplaces

Example of same drawer appearing on a split view and a trowser

265px Add Drawer

  • When adding existing items to a transaction (in a trowser).
  • When it’s important to stay in context and the action applies changes to the parent page.
adddrawer

example: adding a delayed charge to an invoice

Appearance & Behavior

Opening and closing the drawer

565px Create/Edit drawer

  • Can be opened by clicking on a form field, a table row, a button or other UI elements. A toggle button is not recommended.
  • Always slides in from the right side of the page.
    • If the window is smaller than 1695px, the drawer will need to overlay on top of some or all page content.
    • The parent page content may be disabled until the drawer is closed with a black 60% opacity mask.
    • If the page is at least 1695px, the drawer can sit side by side with the page content because our minimum page width is 1130px and this would provide adequate space for the drawer.
  • Uses the full height of the page, covering any headers and footers present.
  • The drawer disappears completely when closed and relies on a separate control to open it.
  • The animation should use the same speeds and bounce as the trowser (but the drawer animates from the right).
Responsive design drawer animation

Click to view responsive design animations

265px Add drawer

  • Opens automatically when there are items in the drawer pertaining to the current task.
  • Slides in from the right side of the page and pushes page contents over.
  • Does not cover any headers or footers.
  • May be collapsed using the provided expand/collapse control.
  • The animation should use the same speeds and bounce as the trowser (but the drawer animates from the right).

Animation

Click to see the drawer animation.

click to see animation

click to see animation

Drawer panel

  • The panel contains the main content of the Drawer.
  • There is an “X” placed in the top-right corner. It always closes the drawer (and animates it back out.)
  • The title is located on the panel’s top-left corner and scrolls with the content.
  • When placing a form in the drawer:
  • Accepted drawer widths are either 565px or 265px.
    • 565px drawer is treated as a layer on top of the page and therefore fills the entire screen height, covering the header and footer. Content inside can scroll vertically behind the drawer’s sticky footer.
    • 265px drawer is treated as part of the page and therefore does not cover navigation or have a sticky footer. It shares the same background color, title and padding.

Note: Unlike trowsers, drawers are only used for a single step; no flows or tabs should appear in the drawer and the drawer does not stack.

Sticky footer (565 px version only)

Adopting the layout and behavior of the Trowser’s sticky footer, the Drawer’s sticky footer permanently anchors to the bottom of the screen and is home to the actions.
The primary action typically saves the changes and closes the Drawer. There is no need for a cancel button as the X closes the Drawer.

 

Responsive Behavior

The large drawer behaves the same way across devices. In fact, it replaces other patterns on mobile such as the popover.  On phones, the drawer covers 100% of the width of the device.

iOS

When to Use

On the iPad, use when:

  • A user needs to make a selection from a large amount of data
  • A user wants to see relevant data while staying in context

Appearance & Behavior

The drawer opens when:

  • a user taps a selection button in a form, or
  • taps the notes button

It can also be opened and closed by swiping…

getdrawer_flat

 

Selecting from a list in the drawer

Selecting from a list in the drawer

 

getdrawer

 

Notedrawer

 

© Intuit 2016 | Terms of use