Drawer (8 min)

01 Getting Started

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.

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.

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.

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.

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.

11 Got Feedback?

Additional Resources

• Show Action for Modals
• Hide Action for Modals