Skip to content
Dropdown
Overview
A customizable dropdown overlay component that creates an accessible, animated dropdown menu triggered by a button. Provides flexible positioning, styling, and responsive behavior options.
Common use cases
- Create navigation menus with dropdown submenus
- Build interactive forms with dropdown options
- Display additional content on hover or click
- Organize related content in collapsible dropdowns
- Create mobile-friendly navigation patterns
Compatible blocks
The following blocks can be nested within this block:
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals direction, horizontal position, show on hover, and visibility | Checkbox (default: false) |
Spacing
| Setting | Description | Options |
|---|---|---|
| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) |
| Enable top padding | Adds top padding | Checkbox (default: false) |
| Enable bottom padding | Adds bottom padding | Checkbox (default: false) |
| Enable internal padding | Adds padding inside the dropdown content area | Checkbox (default: true) |
Layout
| Setting | Description | Options |
|---|---|---|
| Width | Controls the width of the dropdown | 100 - 400 px (default: 130) |
| Direction | Controls whether the dropdown opens up or down | • Up (default) Visible when Show advanced settings is on |
| Horizontal position | Controls horizontal positioning of the dropdown relative to the trigger | • Left (default) Visible when Show advanced settings is on |
| Horizontal alignment | Controls horizontal alignment of the dropdown trigger | • Left (default) |
| Show on hover | Only displays the dropdown on hover | Checkbox (default: false) Visible when Show advanced settings is on |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |