--- index: 2 --- # 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](menu-item.md) ## Block settings ### General | Setting | Description | Options | | --- | --- | --- | | Show advanced settings | Reveals 10 advanced options including enable dropdown icons, enable click to open, and more | Checkbox (default: false) | ### 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)

Visible when **Show advanced settings** is on| | Enable click to open | Opens dropdowns on click instead of hover only | Checkbox (default: false)

Visible when **Show advanced settings** is on| | 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 | | ----------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Layout | Layout style for dropdown menus |

• Stacked (default)
• Inline

| | Enable internal padding | Adds internal padding to dropdown content | Checkbox (default: true) | | Enable margin | Applies margin for full-width dropdown columns | Checkbox (default: true)

Visible when **Menu columns** is not blank and **Show advanced settings** is on | | 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 | ### Dropdown colors These settings appear in the theme editor when **Show advanced settings** is on. They control the dropdown panel surface. | Setting | Description | Options | | ------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Type | Custom scheme vs preset dropdown colors |

• Custom
• Base (default)



Visible when **Show advanced settings** is on and **Enable inheritance** is off (dropdown colors) | | Color scheme | Background and text pairing | Color scheme picker

Visible when dropdown type is **Custom**, **Show advanced settings** is on, and **Enable inheritance** is off (dropdown colors) | | Color scheme | Preset background pairing |

• Body background (default)
• Body foreground
• Accent 1–3
• Shade 1–3
• Blur
• Transparent



Visible when dropdown type is **Base**, **Show advanced settings** is on, and **Enable inheritance** is off (dropdown colors) | | Border | Dropdown panel border |

• None
• Subtle (default)
• Strong



Visible when **Show advanced settings** is on, dropdown type is **Base**, and **Enable inheritance** is off (dropdown colors) | | Divider | Divider between stacked dropdown items |

• None
• Subtle (default)
• Strong



Visible when **Show advanced settings** is on, dropdown type is **Base**, and **Enable inheritance** is off (dropdown colors) | | Enable inheritance | Inherit dropdown colors from the closest parent |

Checkbox (default: false)

Visible when **Show advanced settings** is on

| ### Link colors These settings appear when **Show advanced settings** is on. They control parent, child, and grandchild link text colors. | Setting | Description | Options | | ------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Type | Custom scheme vs preset link text colors |

• Custom
• Base (default)



Visible when **Show advanced settings** is on and **Enable inheritance** is off (link colors) | | Text | Text color pairing | Color scheme picker

Visible when link type is **Custom**, **Show advanced settings** is on, and **Enable inheritance** is off (link colors) | | Text | Preset text color |

• Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1–3



Visible when link type is **Base**, **Show advanced settings** is on, and **Enable inheritance** is off (link colors) | | Enable inheritance | Inherit link colors from the closest parent |

Checkbox (default: true)

Visible when **Show advanced settings** is on

| ### 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



Visible when **Show advanced settings** is on|