Navigation Menus in the Sparkforge Funnel Builder

Navigation Menus in the Sparkforge Funnel Builder give visitors a structured way to move between pages and sections. Recent updates added a wrap option and cleaner submenu styling for better behavior across devices.

What a Navigation Menu supports

• Direct links to internal funnel or website pages.
• External URLs.
• Dropdown menus with parent and child items.
• Nested submenus.
• Anchor links that scroll to sections on the same page.
• Responsive collapse to hamburger on mobile.

Most builds put the menu in a header section, sometimes a second copy in the footer.

Add a Navigation Menu

1. Open the funnel or website in the Builder.
2. Click Add Element.
3. Select Navigation Menu.
4. Drag it into the section where it belongs (usually the header).
5. Click the element to open its settings panel.

Configure menu items

Inside the settings panel you can:

• Add new menu items.
• Rename labels.
• Link to internal pages, external URLs, or anchors.
• Add sub-items to create dropdowns.
• Reorder items by dragging.

Build a dropdown

1. Add a parent menu item.
2. Click Add Sub Item under the parent.
3. Configure the child link.
4. Repeat for additional nested items.

Wrap option

The wrap option lets menu items move to the next line when there isn't enough horizontal space. Without wrap, long menus either overflow or compress into illegible labels.

When to enable wrap

• Menus with many top-level items.
• Long item labels.
• Tablet and mid-sized viewports where the header gets squeezed.

Wrap keeps the header alignment clean and prevents layout distortion on smaller screens.

Submenu styling

Recent submenu updates improved:

• Dropdown rendering stability — fewer flicker frames on hover.
• Hover behavior consistency.
• Spacing and alignment between parent and child items.
• Cross-device styling consistency.

Mobile behavior

Navigation Menus collapse to a hamburger layout on mobile by default. Recent updates improved touch responsiveness, dropdown interaction on small screens, and animation transitions.

Styling the menu

Each menu lets you customize fonts, colors, hover states, spacing, alignment, and active-state highlighting. Set the styles once at the menu level rather than per item to keep the header coherent.