A drawer is a component that allows for content to be hidden until triggered at which point the content will slide from either the left or right of the viewport and block all other page content, similar to a dialog.
The backdrop should be created when a drawer is opened and destroyed when the drawer is closed.
The inner part of the drawer contains the information critical to the user.
The header should give the user a sense of what the drawer content will contain.
It usually contains the following elements:
- Close button
- Button or button group
The content area holds the main information for you drawer such as text, form fields, or a gallery. Your content should not contain any cards.
There is no default padding in the content area so that lists and other common UI components don’t need to be reset to display properly. The content area should also span as much of the visible area as possible, given the space occupied by the header and footer.
A drawer may contain an optional footer. It should be fixed to the bottom of the drawer so that it’s contents are always visible, even if the content area takes up a tremendous amount of space.
A drawer can be docked either on the left or right side of the viewport.
A drawer can be either small or large.