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.
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected Examples
Accessibility
Key Function 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.
Key Function 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.
Key Function 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.
