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.


By default, a drawer anchors to the left edge of the screen and has variant="primary".

You can place drawer on the left, right, top and bottom edges using the position prop.

Set variant="secondary" for a secondary drawer.