Drawer

A versatile UI element that displays additional content or options in a collapsible panel.

What the component handles

  • Focus moves to first focusable element when drawer opens
  • Focus trap - keyboard navigation loops within drawer until closed
  • role="dialog" and aria-modal="true" are automatically applied
  • Drag handle is labeled adequately for screen readers ("Click to close")
  • Back and close buttons are labeled adequately for screen readers (close button includes drawer title)

What you need to provide

  • anchorElement prop to return focus to the correct element when closed