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:

• Container

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) • Down Visible when Show advanced settings is on
Horizontal position	Controls horizontal positioning of the dropdown relative to the trigger	• Left (default) • Center • Right Visible when Show advanced settings is on
Horizontal alignment	Controls horizontal alignment of the dropdown trigger	• Left (default) • Center • Right
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) • Mobile only • Desktop only Visible when Show advanced settings is on