# 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](https://help.brickspacelab.com/slab/content/blocks/navigation/menus/menu-dropdown/menu-item)
## 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 |
|
| 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 |
|
### 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 |
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 |
