Menu dropdown

Overview

A container component that handles menu dropdown functionality and styling. Provides a flexible menu system with support for nested links, dropdowns, and featured content blocks. Uses Alpine.js for dropdown menu interactions and positioning, supports full-width dropdowns for specified menu columns, and handles nested menu items up to grandchild level.

Common use cases

• Use for main navigation menus that require dropdowns

• Configure menu_columns setting for full-width mega menus

• Add navigation images to enhance visual hierarchy

• Customize fonts and spacing to match site design

• Leverage blocks to add featured content in dropdowns

Compatible blocks

The following blocks can be nested within this block:

• Menu item

Block settings

Content

Setting	Description	Options
Menu	Select the menu to display	Link list picker (default: main-menu)

Parent links

Setting	Description	Options
Font family	Font family for parent menu links	• Standard • Heading • Subheading • Accent Visible when parent font size contains type--
Font size	Font size for parent menu links	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6
Enable dropdown icons	Shows chevron icons for menu items with dropdowns	Checkbox (default: true)
Enable link as button	Converts parent links with children to buttons	Checkbox (default: false)

Child links

Setting	Description	Options
Font family	Font family for child menu links	• Standard • Heading • Subheading • Accent Visible when child font size contains type--
Font size	Font size for child menu links	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6

Grandchild links

Setting	Description	Options
Font family	Font family for grandchild menu links	• Standard • Heading • Subheading • Accent Visible when grandchild font size contains type--
Font size	Font size for grandchild menu links	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6

Dropdown

Setting	Description	Options
Color scheme	Background and text color scheme for dropdown	• Body (default) • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent
Color border	Border color for dropdown	• Body • Subtle (default) • Strong • Primary • Secondary • Tertiary • None
Layout	Layout style for dropdown menus	• Stacked (default) • Inline
Color divider	Divider color between stacked dropdown items	• Body • Subtle (default) • Strong • Primary • Secondary • Tertiary • None
Enable internal padding	Adds internal padding to dropdown content	Checkbox (default: false) Visible when dropdown is not full-width
Enable margin	Applies margin based on theme settings	Checkbox (default: true) Visible when menu columns is not blank
Gap size	Spacing between dropdown menu items	• None • Default (default) • XS • SM • MD • LG • XL
Menu columns	Comma-separated list of menu items to display as full-width columns	Text input

Spacing

Setting	Description	Options
Top spacing	Padding space at the top of parent links	0 - 30 px (default: 15)
Bottom spacing	Padding space at the bottom of parent links	0 - 30 px (default: 15)
Enable horizontal padding	Adds horizontal padding around the menu	Checkbox (default: false)
Gap size	Spacing between menu items	• None • Default (default) • XS • SM • MD • LG • XL

Layout

Setting	Description	Options
Horizontal alignment	Controls horizontal alignment of the menu	• Left (default) • Center • Right

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only