Drawer Design system

Open secondary content while keeping the main screen context.

8 checks · 3 content groups

Checklist contents

Review progress

Structure and meaning

Compare information and presentation in context of use.

State the contents of the panelUse the title to know if this is navigation, insight, or editing.Choose drawer when viewing the main content still helps the task.Example The “Order Details” panel opens on the right, the order list remains at the back.Choose a consistent open edgeKeep the opening orientation appropriate to the role and the space wide enough to read the content.Specify the minimum and maximum width for each type of panel; The same role should open from the same edge to keep expectations.Indicates the panel is openAssociate the open button with the panel and reflect the open or closed state.The open button name needs to indicate what content will appear; The open state must update even if the drawer is closed with Escape.Manage focus by panel typeWith modal drawers, keep focus inside and return the open button when closed.Drawer support next to content and modal drawers have different rules; Don't lock focus when the user still needs to interact with both areas.

Interaction and usability

Try the operation, change the status and continue working.

There is a clear roadEnables close, Escape, and background buttons where appropriate without losing data yourself.Keep the close button visible when scrolling; If unsaved draft warnings are needed, all closures must use the same rules.Keep long-form content accessibleFor scrolling content, don't cover titles or end actions.Test on narrow screenAdjust the width, keyboard, and button positions when the panel takes up the entire screen.When the panel becomes full screen, check the return, safe area and keyboard; Don't just minimize the desktop.

Complete the experience

Check for details that are easy to miss when putting the design into use.

Organize the drawer action areaWhen a drawer supports editing, keep save and cancel actions in a stable location distinct from the scrolling content.If you keep the panel feet in place, leave enough space at the end of the content so it doesn't cover the last field; on your phone, try it with the keyboard open as well.

Progress is saved automatically in this browser.

GUIDANCE

How to review

State the contents of the panel

Choose drawer when viewing the main content still helps the task.

EXAMPLES

Usage examples

State the contents of the panel

The “Order Details” panel opens on the right, the order list remains at the back.

Drawer Design system

Structure and meaning

Interaction and usability

Complete the experience

How to review

State the contents of the panel

Usage examples

State the contents of the panel

Panel opening direction

Details

Background layer and focus

Details

Panel layout

Details

Find a checklist

No checklists found

Drawer Design system

Structure and meaning

Interaction and usability

Complete the experience

How to review

State the contents of the panel

Usage examples

State the contents of the panel

Variants and use cases

Panel opening direction

Background layer and focus

Panel layout