DashKit Icon
DashKit
Dashboard UI Kit
Getting Started
Structure
Components
Variables
Dark Mode
Installation
Template
Style Guide
Licensing
Changelog
Powered by Webflow
Template
Components
Component Documentation
Open Drawer
Move Goal
Set your daily activity goal.
Placeholder chart displaying categories in a dark user interface.
Button
Cancel
Open Drawer
Move Goal
Set your daily activity goal.
Placeholder chart displaying categories in a light user interface.
Button
Cancel

Drawer

The Drawer component is a sliding panel that enters from the bottom of the screen, commonly used for mobile navigation, quick settings, filters, or temporary content areas. It overlays the main interface while keeping the user within the current page.

By default, the component includes a trigger button to open the drawer.

Inside the drawer, you’ll find a content slot where you can insert any layout or UI elements, such as text, forms, or buttons. You can also customize labels and headings via the Component Properties panel.

Usage

  1. Drag the Drawer component onto the canvas.
  2. Edit the trigger button label in the properties panel.
  3. Drop your content into the drawer’s slot — this can be anything from text to complex layouts.
  4. (Optional) Adjust the heading or supporting text using component properties.

The Drawer is ideal for compact, mobile-friendly overlays that don't interrupt the current page flow.

GSAP powered interaction

This drawer uses Webflow’s new GSAP-powered Interactions. When the .drawer_trigger is clicked, the .drawer_popup animates open. Clicking .drawer_close or .drawer_pull closes the dialog popup again.