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

General

Setting	Description	Options
Show advanced settings	Reveals 10 advanced options including top spacing, bottom spacing, and more	Checkbox (default: false)

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) Visible when Show advanced settings is on
Bottom spacing	Spacing below the menu	0 - 30 px (default: 0) Visible when Show advanced settings is on
Enable horizontal padding	Adds horizontal padding around the menu	Checkbox (default: false) Visible when Show advanced settings is on
Enable internal padding	Adds internal padding to menu items	Checkbox (default: false) Visible when Show advanced settings is on
Gap size	Spacing between menu items	• None • Default (default) • XS • SM • MD • LG • XL Visible when Show advanced settings is on

Color

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

Setting	Description	Options
Type	Custom scheme vs preset text colors	• Custom • Base (default) Visible when Show advanced settings is on and Enable inheritance is off
Text	Text color pairing	Color scheme picker Visible when type is Custom, Show advanced settings is on, and Enable inheritance is off
Text	Preset text color	• Default (default) • Alternative • Link • Error • Success • Shade 1–3 Visible when type is Base, Show advanced settings is on, and Enable inheritance is off
Enable inheritance	Inherit colors from the closest parent with a set scheme	Checkbox (default: true) Visible when Show advanced settings is on

Style

Setting	Description	Options
Hover style	Controls the hover effect for menu items	• None (default) • Background • Fade Visible when Show advanced settings is on

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 Visible when Show advanced settings is on