Drawer Element

The Drawer element provides a versatile side panel that slides into view from any edge of the screen, suitable for complex sub-menus or resource panes.

Live Preview

Use the trigger button below to open the drawer from the right side of the screen.

Drawer Preview

Specifications

Drawers leverage specific directional transitions and overlay controls:

  • Opening Direction: Configure the panel to slide in from the Top, Bottom, Left, or Right.
  • Responsive Scaling: Set the drawer Size (SM-Full) to determine its reach into the main screen.
  • Overlay Shading: Set a custom Opacity (0-1) for the background mask that appears with the drawer.
  • Interaction Linkage: Trigger drawer behavior via the Open-Drawer or Close-Drawer actions from other elements.
  • Content Layout: Supports any nested collection of Canvas Elements like navigational links, forms, or containers.
  • Styling: Apply custom border colors and shadows to the sliding drawer container directly.

AI Guidance

How to prompt for Drawers:

  • Add a navigation drawer that slides in from the left.
  • Create a large drawer that occupies 50% of the screen for help content.
  • Insert a drawer containing a newsletter form with a dark overlay.