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

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)

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

Setting	Description	Options
Color scheme	Background and text color scheme for menu page	• Body (default) • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary
Color border	Border color for menu page	• Subtle (default) • Strong • None

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