Drawer (8 min)
Completion requirements
01 Getting Started
This tutorial covers the custom drawers, including:
- An overview of the drawer.
- The structure of the drawer.
02 Drawer Overview
The drawer is a panel that slides out from the side of the screen to reveal content like navigation or filters.
The drawer element can be found under the Containers tab.

Click the styling menu icon to access the styling menu.


Click the styling menu icon to access the styling menu.

03 Drawer Tab
This chooses the styling for the main body of the container.


04 Toolbar Tab
The Toolbar tab controls how the top bar of the drawer is displayed.


05 Title Tab
Use the element settings menu to create a heading for your drawer.

To make styling changes, use the title tab.


To make styling changes, use the title tab.

06 Icons Tab
There are two icons that are always added to your drawers. A close and pin icon. These icons are fixed and cannot be moved.

Any style changes that you make using the Icon tab will be applied to both icons.


Any style changes that you make using the Icon tab will be applied to both icons.

07 Content Tab
You can add any elements you require to the main body of the drawer. To make styling changes to these elements, use the content tab. Setting padding will give your drawer a uniform look.


08 Lightbox Tab
The lightbox displays a shadow over the main content when the drawer is open. The default color is grey. You can change the color or set an image using the lightbox tab.
Note: You can only check your lightbox color in preview mode.

Note: You can only check your lightbox color in preview mode.

09 Column Tab
You can apply styling per each styling drawer.
The row gap sets the spacing between each element.


10 Element Settings
You can make some style changes using the element menu.
Under the Content tab, you can choose the position of the drawer and the number of columns.

The Interactivity tab offers a persistent option, enabling this function means the drawer is always displayed.

Under the Content tab, you can choose the position of the drawer and the number of columns.

The Interactivity tab offers a persistent option, enabling this function means the drawer is always displayed.
