Skip to content
IndexDesign corpus

Drawer

57 resources ship this component · Overlays

Also called: tray, flyout, side sheet, off-canvas, offcanvas, side panel, right side panel, slide-over, drawers.

Before you ship7 checks
  1. 01Placement — Which edge the drawer slides from - most commonly from left (navigation) or right (details/settings)
  2. 02Dimensions — Typically full height, but width can vary. Should be wide enough for complex content to be shown, without taking over the entire page
  3. 03Overlay — A semi-transparent background for the remaining screen area to bring focus to the drawer
  4. 04Header — Top section with a title describing drawer contents or purpose, along with a close action (optional)
  5. 05Content area — Main section, which should be scrollable if content exceeds window height
  6. 06Open and close trigger — How user activate the drawer — typically a button to open, while closing can have multiple ways: clicking overlay, a close button, or pressing Esc on keyboard should all be active options
  7. 07Footer — Fixed area at the bottom for actions, usually a primary and secondary e.g. Save & Cancel

Checks from checklist.design, MIT.

Ships it57