Drawer Component

Configuration Options
Theme Options


The drawer component can be used to show a drawer overlay that can slide in from any of the directions. It opens on top of all existing components.

When you drag the component in, it creates a button component linked to the drawer. Clicking the button should open the drawer.


Configuration Options

Button Text

Expected Type: String

The text for the companion button that opens the drawer. Defaults to Open Drawer.

Drawer Position

Expected Type: RIGHT | LEFT | TOP | BOTTOM

The drawer can be triggered to open from the left, right, top or the bottom. It always sticks to the edge set.

Drawer Width

Expected Type: Number

The width in pixels for the drawer. Only applicable when opening from the left or right.

Drawer Height

Expected Type: Number

The height in pixels for the drawer. Only applicable when opening from the top or bottom.


  • Click: Triggers whenever the menu is clicked.
  • Double Click: Triggers whenever the menu is clicked twice in quick succession.
  • Right Click: Triggers whenever the menu is right-clicked.
  • Mouse Enter: Triggers whenever the mouse starts hovering over the component.
  • Mouse Leave: Triggers whenever the mouse stops hovering over the component.

Theme Options

  • Button Background Color: The button's background color. (String | Hex)
  • Button Text Color: The button's text color. (String | Hex)
  • Button Text Align: The button's text alignment. (Left | Center | Right)
  • Button Text Size: The button's text size. (Number | Pixels)
  • Button Text Style: The button's text style. (Bold | Italic | Underline)
  • Button Border: The button's border. (Border)
  • Drawer Background Color: The drawer's background color. (String | Hex)
  • Drawer Shadow: The drawer's shadow. (Shadow)
  • Drawer Border: The drawer's border. (Border)
Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →