The drawer component shows and hides the content within it, with or without animation. Drawers are a key functionality of case preview and main navigation. A drawer is not a stand-alone component.

When a drawer opens, it will open on top of any other content. If you would like the drawer to push and pull content on the page rather than open on top of it, consider using the expand collapse component instead.

A drawer may be anchored on any of the four screen-edge boundaries (top, right, bottom, left). Drawers will always expand to 100% of the height (when using left or right) or width (when using top or bottom) of the viewport or containing element. They are often dismissible by user action.