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, choose same-tab or new-tab behavior, and keep SEO relationship settings attached to the saved link
• 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

Mega-menu panels can use a single corner radius or individual corner controls for the panel's top-left, top-right, bottom-right, and bottom-left corners.

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, including same-tab or new-tab behavior and SEO relationship settings from the link picker
• Mobile Visibility: Header or Slideout Only
• Background Color, Text Color, Hover Background, Hover Text
• Border Color, Border Size, Border Radius
• CTA button updates use the same saved link and style controls in the builder and on the published menu, including square button corners when the radius is set to zero.

Ask AI

Use Ask AI from the Menu toolbar when you want help shaping a menu from pages that already exist on the website.

• Core pages: build a concise main menu from home, about, services, contact, booking, or start pages when those pages exist.
• Folder pages: create a one-level submenu from pages in a named folder.
• Improve labels: shorten or clarify labels while keeping the current links unless you ask for a different structure.
• Add CTA: add or update the menu CTA and link it to the best matching existing page.
• Custom prompt: describe a specific label, submenu, or CTA change. AI menu edits only use existing pages, so review skipped suggestions when a requested destination is not available yet.

Toolbar actions

• Menu Settings
• Ask AI
• 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.
• Submenu hover text and background colors follow the saved Submenu tab controls on live pages and mega-menu panels, even after older generated hover styling is present.
• 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.
• Mega-menu panels load more quickly when their content can use the lightweight renderer, and fall back to the full renderer only when needed.
• Horizontal menus size to their content more naturally, so header rows no longer reserve extra vertical space when the design does not need it.
• Menu item and CTA links keep their open mode on the published site, and square CTA buttons keep a zero border radius when that style is selected.
• Menu alignment is steadier in compact header rows, including menus that sit inline beside other header content.