Drawer

Also known as

Flyout, Sheet, Side panel

Drawer is an expandable panel that displays content and controls over the application content. It provides temporary access to additional or related content without navigating away from the current screen.

KeyFunction
Enter / Space
  • If focus is on the trigger element, this action activates the element and opens the drawer. Focus doesn't leave the drawer.
  • If focus is on close button, this action closes the drawer. Focus returns to the trigger element.
  • If focus is on a content element configured to close the drawer when activated, such as a Submit button, this action closes the drawer.
Tab
  • Tab moves focus through focusable content elements in the drawer. Focus doesn't leave the drawer.
Shift + Tab
  • This action moves focus to previous focusable content element in the drawer. Focus doesn't leave the drawer.
Escape
  • Escape closes the drawer and returns focus to the trigger element.