Skip to content
Drawer
Overview
A customizable drawer component that displays content in a sliding overlay panel. This component creates an interactive drawer that can be positioned at the bottom, left, or right of the screen with a button to trigger its visibility.
Common use cases
- Use for navigation menus, filters, cart drawers, or any content that should appear on demand
- Consider the best position based on content type (e.g., filters often work well as left/right drawers)
- Ensure drawer content is accessible and navigable by keyboard
- Customize colors and borders to match your theme design
Compatible blocks
The following blocks can be nested within this block:
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals close button, colors, inheritance, margin, width, full height, and device visibility | Checkbox (default: false) |
Content
| Setting | Description | Options |
|---|---|---|
| Overlay preset | Select a preset overlay ID or use a custom one | • Account |
| Overlay ID | Custom identifier for the overlay (used to trigger it programmatically) | Text input |
| Show close button | Displays a close button in the drawer | Checkbox (default: false) |
Color
| Setting | Description | Options |
|---|---|---|
| Type | Custom scheme vs preset surface colors | • Custom Visible when Show advanced settings is on and Enable inheritance is off |
| Color scheme | Background and text pairing | Color scheme picker Visible when type is Custom, Show advanced settings is on, and Enable inheritance is off |
| Color scheme | Background and text pairing | • Body background (default) Visible when type is Base, Show advanced settings is on, and Enable inheritance is off |
| Border color | Drawer border | • Subtle (default) Visible when Show advanced settings is on, type is Base, and Enable inheritance is off |
| Enable inheritance | Inherit colors from the closest parent with a set scheme | Checkbox (default: false) |
Layout
| Setting | Description | Options |
|---|---|---|
| Horizontal position | Position of the drawer along the horizontal axis | • Left |
| Vertical position | Position of the drawer along the vertical axis | • Top (default) Visible when horizontal position is Center |
| Margin | Outer margin around the drawer panel | • Default Visible when Show advanced settings is on |
| Enable full height | Makes the drawer extend to full viewport height | Checkbox (default: false) |
| Enable custom width | Enables a custom width percentage | Checkbox (default: false) |
| Width | Drawer width | 0–100 % (default: 35 %) |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |