Skip to content
Index730 resources
Drawer

Drawer

55 resources in the index ship this component, best first. Group: Overlays.

Also called · tray · flyout · side sheet · off-canvas · offcanvas · side panel · right side panel · slide-over · drawers

Before you ship

7
  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 it

55