Menu widget

The Menu widget allows you to create structured navigation menus that help visitors move through your website easily and intuitively. It supports multiple layouts, nested submenus, and extensive styling options, making it flexible for side navigation, content navigation, and contextual menus.

Used correctly, the Menu widget improves usability, clarity, and overall content structure.

📌 Note

For building main site navigation in headers, see the separate article: Header Menu Widget.

What the Menu Widget Is Used For

Use the Menu widget to:

  • Create side navigation or section-based menus
  • Organize pages and content hierarchically
  • Add dropdown or nested navigation
  • Build contextual navigation inside sections
  • Create responsive menus for content areas

Common examples:

  • Service menus with nested offerings
  • Sidebar menus for dashboards or portals
  • Navigation inside landing pages or long-form content
  • Burger-style menus for compact layouts

Adding and Managing Menu Items

Add Menu Item

Click Add Menu Item to create a new menu entry.

When you add or edit a menu item, the Select a Link popup opens. This is the same link selector used throughout the platform, meaning you can link to almost anything:

  • Pages
  • Store items
  • Funnels
  • External links
  • Anchor points
  • Files
  • Popups
  • Video popups
  • Email links
  • Phone links

💡 Tip

For a full explanation of all link types and options, see the separate article: How to Use Links.

Creating Submenus (Dropdowns)

You can create one level of submenus by dragging menu items.

How it works:

  • Use the drag handle on the left side of a menu item
  • Drag the item slightly to the right and place it under another menu item
  • The item becomes a submenu of the parent item

This allows you to:

  • Group related pages under a main category
  • Create clean, organized navigation
  • Reduce visual clutter in longer menus

💡 Best practice

Use submenus to group content logically, but avoid excessive nesting to keep navigation clear and easy to scan.

The Menu Styling popup allows you to control the visual appearance of the menu without changing its structure or links. Here you can adjust layout type, colors, typography, spacing, borders, hover states, and submenu behavior.

This popup is where you fine-tune how the menu looks and feels so it matches your brand, layout, and usability goals—whether you want a clean minimal menu, a clearly separated list, or a more expressive design with hover and submenu effects.

💡 Tip

Start with simple styling and clear contrast, then refine spacing and hover states to improve clarity and interaction without overwhelming the layout.

The Menu widget supports three layout types. Each one fits different use cases.

Horizontal Menu

Menu items are displayed in a row.

Best for:

  • Section-level navigation
  • Inline navigation inside content blocks
  • Compact menus with few items

Why use it:

  • Clean and familiar layout
  • Easy to scan horizontally
  • Works well for short menus

Vertical Menu

Menu items are stacked vertically.

Best for:

  • Side navigation
  • Content hubs or portals
  • Long or structured menus

Why use it:

  • Handles many items well
  • Excellent for hierarchical navigation
  • Easy to scan vertically

💡 Tip

Vertical menus pair well with inline submenus for clear structure.

Burger Menu

Menu items are hidden behind a burger (☰) icon and expand on click.

Best for:

  • Mobile layouts
  • Minimalist designs
  • Secondary or contextual menus

Why use it:

  • Saves space
  • Keeps layouts clean
  • Improves usability on smaller screens

💡 Tip

Use clear labels and avoid deep submenu nesting to keep mobile navigation intuitive.

Styling Options

The Menu widget includes extensive styling controls so the menu can match your brand and layout.

Colors

  • Text Color – default menu item color
  • Background Color – background behind the menu
  • Border Color – used when borders are enabled

Use global colors when possible to maintain consistency across your site.

You can choose how borders are displayed:

  • No border – clean and minimal
  • Wrap border around each item – highlights each menu item individually
  • Show border below each item – creates a list-style divider effect

Choose based on visual density and clarity needs.

Text Alignment

  • Left
  • Center
  • Right

Left alignment is usually best for readability, while center alignment works well for minimal or branding-focused menus.

Typography & Spacing

  • Text Font Family
  • Font Size
  • Menu Item Spacing – spacing between items
  • Uppercase Toggle – make all menu items uppercase for a bold, uniform look

💡Tip

Match menu typography with your headings and buttons for a cohesive UI.

Hover & Active Item Colors

You can define how menu items look:

  • On hover
  • When active

This improves usability by clearly showing:

  • Which item is interactive
  • Where the user currently is

Submenus can be styled independently for clarity and usability.

  • Popup, next to the menu item – classic dropdown behavior
  • Inline, below the menu item – expands within the menu flow

Popup submenus work best for horizontal menus, while inline submenus are ideal for vertical menus and side navigation.

Submenu Colors & Effects

  • Background color
  • Text color
  • Hover text color
  • Optional shadow
  • Optional border (with adjustable border size and color)

💡 Tip

Use subtle shadows or borders to visually separate submenus without overwhelming the design.

Design & UX Tips

  • Keep menus scannable and logically grouped
  • Use submenus to organize related content
  • Match layout choice to context (horizontal for compact areas, vertical for content-heavy areas)
  • Test menus on both desktop and mobile
  • Ensure hover and active states are clearly visible
  • Avoid deep nesting to reduce cognitive load

Summary

The Menu widget allows you to:

  • Build flexible, structured navigation inside your pages
  • Link to any destination supported by the platform
  • Create submenus using drag-and-drop
  • Choose between horizontal, vertical, and burger layouts
  • Fully style text, spacing, borders, hover states, and submenus

Used thoughtfully, the Menu widget creates clear navigation paths, improves usability, and helps visitors move through your content efficiently—across all devices.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.