Drawer
The Drawer is a framework that allows access to content and settings without leaving the page.
Size
The height of the Drawer is fixed, respecting the total height of the browser. The width has 3 defined sizes, which can be used according to need:
- Small: Maximum width of 300px
- Medium (default): Maximum width of 400px
- Large: Maximum width of 600px
Positioning
There are 2 positions: right or left - and each one has a way to turn it on and off.
Right
Specific configuration on an asset, quick view of information for help or consultation. The activation is done by link or button on the page.
The closing mechanism can be done in two ways: in the Drawer itself, through a "close" action, or by clicking outside its area. For more details, access our examples tab.
Left
View as options bar and tools for settings. Example: Landing Page editors.
In relation to Navbar
In general, Drawer that are not structural (persistent), such as editors, should always appear on top of the Navbar, as an external panel.
Persistent Drawer are panels that act as a "toolbar" of a feature. In general, they are exposed and can be minimized or resized. In these cases, the positioning must follow the structure of the tool, being able to be "within" the useful area of the functionality.
Overlay
The Drawer can be used with a darker layer (overlay) when it is necessary to keep the focus only on the Drawer.
When the Drawer content is complementary to the page content, do not use overlay.
When the Drawer content is complementary to the page content, it is recommended not to use overlay.