Menu

Overview

A flexible menu block component that renders a multi-level navigation menu with customizable styling options. Supports up to three levels of navigation (parent, child, and grandchild links) with optional thumbnail images for child and grandchild menu items.

Common use cases

• Use stacked layout for sidebar or mobile menus

• Use inline layout for horizontal navigation bars

• Enable hover animation for interactive menus with many items

• Add thumbnail images to enhance visual navigation

• Configure different styling for each menu level to create visual hierarchy

• Adjust gap sizes based on menu density and available space

Block settings

Content

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

Parent links

Setting	Description	Options
Font family	Controls the font family used for parent links	• Standard (default) • Heading • Subheading • Accent Visible when parent font size contains 'type--'
Font size	Controls the font size of parent links	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6
Font weight	Controls the font weight of parent links	• Default (default) • Light • Bold • Black
Text color	Controls the text color of parent links	• Default (default) • Alternative • Primary • Secondary • Tertiary • Neutral • Shade

Child links

Setting	Description	Options
Font family	Controls the font family used for child links	• Standard (default) • Heading • Subheading • Accent Visible when child font size contains 'type--'
Font size	Controls the font size of child links	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6
Font weight	Controls the font weight of child links	• Default (default) • Light • Bold • Black
Text color	Controls the text color of child links	• Default (default) • Alternative • Primary • Secondary • Tertiary • Neutral • Shade

Grandchild links

Setting	Description	Options
Font family	Controls the font family used for grandchild links	• Standard (default) • Heading • Subheading • Accent Visible when grandchild font size contains 'type--'
Font size	Controls the font size of grandchild links	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6
Font weight	Controls the font weight of grandchild links	• Default (default) • Light • Bold • Black
Text color	Controls the text color of grandchild links	• Default (default) • Alternative • Primary • Secondary • Tertiary • Neutral • Shade

Spacing

Setting	Description	Options
Top spacing	Spacing above the menu	0 - 30 px (default: 0)
Bottom spacing	Spacing below the menu	0 - 30 px (default: 0)
Enable horizontal padding	Adds horizontal padding around the menu	Checkbox (default: false)
Enable internal padding	Adds internal padding to menu items	Checkbox (default: false)
Gap size	Spacing between menu items	• None • Default (default) • XS • SM • MD • LG • XL

Style

Setting	Description	Options
Hover style	Controls the hover effect for menu items	• None (default) • Background • Fade

Layout

Setting	Description	Options
Layout	Controls the menu layout direction	• Stacked • Inline (default)
Horizontal alignment	Controls horizontal alignment	• Left (default) • Center • Right

Display

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