Menu page

Overview

A dynamic menu container component that creates a multi-level navigation menu with hover and click interactions. Supports up to three levels of navigation (parent, child, and grandchild links) with customizable styling and optional thumbnail images for menu items. Uses Alpine.js for menu interaction handling and includes hover and focus states with configurable timing.

Common use cases

• Create multi-level navigation menus with parent, child, and grandchild links

• Use consistent image sizes for navigation thumbnails (recommended 64px)

• Configure menu depth and content for optimal mobile usability

• Keep menu labels concise for better layout

• Test hover/click interactions across different devices

• Use dropdown icons for better UX when submenus are present

Compatible blocks

The following blocks can be nested within this block:

• Menu item

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals 6 advanced options including enable dropdown icons, type, 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

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

Page

These color settings appear in the theme editor when Show advanced settings is on.

Setting	Description	Options
Type	Custom scheme vs preset surface colors	• Custom • Base (default) Visible when Show advanced settings is on and Enable inheritance is off
Color scheme	Background and text pairing	Color scheme picker Visible when type is Custom, Show advanced settings is on, and Enable inheritance is off
Color scheme	Background and text pairing	• Body background (default) • Body foreground • Accent 1–3 • Shade 1–3 • Blur • Transparent Visible when type is Base, Show advanced settings is on, and Enable inheritance is off
Border color	Menu page border	• Subtle (default) • Strong • None Visible when Show advanced settings is on, type is Base, and Enable inheritance is off
Enable inheritance	Inherit colors from the closest parent with a set scheme	Checkbox (default: false) Visible when Show advanced settings is on

Spacing

Setting	Description	Options
Enable padding	Adds padding around the menu	Checkbox (default: false)
Enable internal padding	Adds internal padding to menu content	Checkbox (default: true)
Gap size	Spacing between menu items	• None • Default (default) • XS • SM • MD • LG • XL

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only Visible when Show advanced settings is on