Navigation Menus in the Captivation Hub Funnel Builder

A navigation menu is an interactive element that lets visitors move between pages or sections within your funnel or website. It supports direct page links, external URLs, dropdown menus, nested menu items (one level deep), anchor-based scrolling, and responsive mobile behavior. Navigation menus are commonly placed in headers and footers.

Step 1 — Add a Navigation Menu

1. Go to Funnels and open the funnel or website you want to edit.
2. Open the page in the builder.
3. From Elements, locate Navigation Menu.
4. Drag the Navigation Menu element into the desired section or row.
5. Select the Navigation Menu to open its configuration options in the right sidebar.

Step 2 — Configure Menu Items

Within the Navigation Menu settings panel, you can add and organize menu items:

1. Select the Navigation Menu element.
2. Click Add Item → New Menu Item.
3. Enter the menu item name and destination.
4. Drag the item below the desired parent item, then move it slightly to the right until it appears indented.
5. Repeat for additional nested items under the same parent.

Note: Navigation Menu dropdowns support one level of nested menu items.

To create a dropdown: add a parent menu item, click Add Sub Item under that item, configure the child link, and repeat for additional nested items.

Wrap Navigation Menu Items

The Wrap option allows navigation items to move onto another line when there isn't enough horizontal space to display them in a single row. This prevents layout breaking and improves responsiveness across different screen sizes.

The Wrap option is especially useful for menus with many items, long menu labels, and tablet or mid-sized screens.

Submenu Styling Improvements

Submenu behavior has been enhanced for improved visual consistency and usability. Improvements include more stable dropdown rendering, cleaner hover behavior, improved spacing and alignment, and more consistent submenu styling across devices. These updates eliminate visual inconsistencies and improve the overall interaction flow.

Mobile Behavior

Navigation menus automatically adapt to mobile view. Depending on your configuration, menus may collapse into a hamburger-style layout. Recent improvements also include better touch responsiveness, improved dropdown interaction on mobile, and more consistent animation transitions.

Styling Options

You can customize font style, font size, menu alignment (left, center, right), spacing between items, background color, hover effects, and dropdown appearance. Use the Style tab in the element settings panel to configure these options.

Using Scroll-to-Element with Navigation Menus

Navigation menu items can be configured to scroll to specific sections on the page. Scroll behavior now uses smooth scrolling instead of abrupt jumps, creating a more natural transition when navigating within a page.

Best Practices

• Keep menu labels concise.
• Use dropdowns to organize complex navigation.
• Enable Wrap when using multiple menu items.
• Test mobile view before publishing.
• Avoid excessive nested submenu levels.

Frequently Asked Questions

Q: What does the Wrap option do?
The Wrap option allows navigation items to move onto a new line if they exceed the available width, preventing layout overflow.

Q: Do submenu improvements require any settings change?
No. Styling and behavior improvements apply automatically.

Q: Is smooth scrolling enabled by default?
Yes. Scroll-to-element actions now use smooth scrolling automatically.

Q: Does this affect already-published funnels or websites?
Existing menus benefit from styling and smooth scroll improvements automatically. The Wrap option must be manually enabled if desired.

Q: Does this change manual styling settings?
No. Existing style configurations remain intact.