Menu Widget

Use Menu to build site navigation with optional submenus, a mobile hamburger menu, and an optional CTA button.

Add a Menu widget

Menu Settings

The dialog has five tabs: Items, Styles, Submenu, Mobile, and CTA.

Items tab

• Menu Items list with drag-and-drop ordering
• Add Item
• Drag horizontally to create submenus (one level)
• Use the link picker to set each item destination
• Link warnings help catch missing, placeholder, or unsafe destinations before publishing
• Menu labels automatically format ® and ™ as superscript in preview and live menus

Styles tab

• Desktop Layout: Horizontal or Stacked
• Alignment and Stick to Edge (right aligned menus)
• Text Color, Background Color
• Hover Color, Main Item Hover Background
• Main Active Text Color, Main Active Background Color
• Inverse Header Colors: set alternate text, hover, active, and hamburger colors for headers that use an inverse tone.
• Font Family, Font Style, Font Size
• Letter Spacing, Line Height, Item Spacing
• Main Item Border, Main Item Border Radius, Shadow
• Reset Light and Reset Dark apply clean style presets based on your global theme settings

Submenu tab

• Submenu Text Color, Submenu Background Color
• Submenu Hover Color, Item Hover Background
• Submenu Active Text Color, Submenu Active Background Color
• Submenu Font Family, Submenu Font Style, Submenu Font Size
• Submenu Letter Spacing, Submenu Line Height
• Submenu Border, Submenu Border Radius, Shadow

Mobile tab

• Mobile Layout: Hamburger, Horizontal, Stacked
• Hamburger Alignment
• Hamburger Color, Slideout Background
• Hamburger Size
• Slideout item colors: set text, hover, active text, and active background colors for hamburger slideout items.
• Mobile CTA Settings: CTA Placement, CTA Section Label, Show Divider

CTA tab

• Enable CTA Button
• Button Text
• Font Family and Font Style (bold, italic, underline, all caps)
• Link Address
• Mobile Visibility: Header or Slideout Only
• Background Color, Text Color, Hover Background, Hover Text
• Border Color, Border Size, Border Radius

Toolbar actions

• Menu Settings
• Alignment
• Animation
• Copy
• Delete

Live behavior notes

• Desktop menu content now stays visible during initial page load before overflow measurement finishes, reducing first-load flicker.
• Desktop submenu panels now size to their content more consistently, which helps longer item labels fit without cramped dropdowns.
• Hover and active styles now stay more consistent across desktop menus, stacked submenu states, and mega-menu variants.
• Desktop submenu panels fade between items more smoothly, including when you move across large menu panels.
• Menus inside inverse headers can use separate colors for their base, hover, active, and hamburger states.
• Mobile menus can stay as a hamburger slideout, remain horizontal, or switch to a stacked layout depending on the selected mobile layout.
• Hamburger slideouts use their own item color controls, so active and hover states can differ from the desktop menu when needed.
• Hamburger slideouts include clearer open/close labels, focus handling, and Escape-key closing for keyboard and screen-reader users.
• Mobile hamburger slideouts open and close more reliably on iOS and include larger touch targets for menu items and close controls.
• Headers with multiple menus now route the mobile hamburger to the menu that owns the mobile drawer, so mega-menu headers open the expected slideout.
• Mega-menu content keeps row spacing more consistently, and mobile slideouts can present wider mega-menu content in two columns when the design supports it.
• Horizontal menus size to their content more naturally, so header rows no longer reserve extra vertical space when the design does not need it.