These Nodes provide advanced navigation controls and modal UI management beyond basic routing. They enable programmatic control of tab navigation, layout preloading, and specialized UI patterns like blocking modals and mega menus.

Modal Management

These Nodes control full blocking modal dialogs that require user interaction before continuing.

• Open Modal: Opens a full blocking modal dialog with specified content.
• Close Modal: Closes the currently open modal dialog, optionally returning data.

Navigation UI Controls

These Nodes manage specialized navigation patterns and UI elements.

• Open Mega Menu: Opens a large, full-width dropdown navigation panel below the navigation bar.
• Navigate to Tab: Programmatically switches the active tab in a tab-based navigation component.

Performance & History Controls

These Nodes optimize navigation performance and control history behavior.

• Preload Layout: Pre-loads or pre-renders a layout in the background before the user navigates to it.
• Redirect: Navigates to a new route while replacing the current history entry (no back button return).

Open Modal

This Node opens a full blocking modal dialog that renders a specified Layout. Unlike overlays which can be dismissed by clicking outside them, modals require explicit user action to dismiss.

To configure Open Modal, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Layout ID: The identifier of the Layout to render within the modal. Right-click on the desired Layout in the Structure Panel and select "Copy ID" to obtain this value.
• Modal Data: Optional data to pass into the modal Layout. This data becomes accessible through the OverlayData data source within the modal Layout.
• Modal ID: Optional unique identifier for the modal. Provide an ID if you need to update the modal's data after it's been opened or close a specific modal when multiple modals are present.

Common Use Cases:

• Displaying critical information that requires user acknowledgment
• Showing confirmation dialogs before destructive actions
• Presenting forms that must be completed or cancelled
• Displaying loading states that block user interaction

💡💡💡 Tip 💡💡💡

Use modals for interactions that require user attention and a decision before proceeding. Use Open Overlay for non-blocking UI elements like tooltips, popovers, or dismissible notifications.

📍📍📍 Note 📍📍📍

The Layout rendered in a modal should include a way for users to close it, such as a "Close" or "Cancel" button connected to the Close Modal Node. Without an explicit close mechanism, users may become trapped in the modal.

Close Modal

This Node closes the currently open modal dialog. If multiple modals are open, you can specify which modal to close using its ID.

To configure Close Modal, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Modal ID: Optional identifier of the specific modal to close. If omitted and only one modal is open, that modal will be closed. If multiple modals are open, provide the ID to specify which one to close.
• Return Data: Optional data to pass back to the Flow that opened the modal. This allows modals to return user selections, form data, or confirmation status.

Common Use Cases:

• Closing confirmation dialogs after user makes a choice
• Dismissing forms after successful submission
• Closing modals with user-provided data (selected items, form values)
• Implementing "Cancel" or "Close" buttons in modal Layouts

💡💡💡 Tip 💡💡💡

Use the Return Data parameter to communicate modal results back to the calling Flow. For example, a confirmation modal can return { confirmed: true } or { confirmed: false } to indicate the user's choice.

Open Mega Menu

This Node opens a large, full-width dropdown navigation panel that appears below the navigation bar. Mega menus are commonly used in e-commerce sites to display hierarchical category navigation with rich content.

To configure Open Mega Menu, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Layout ID: The identifier of the Layout to render within the mega menu. Right-click on the desired Layout in the Structure Panel and select "Copy ID" to obtain this value.
• Menu Data: Optional data to pass into the mega menu Layout. This data becomes accessible through the OverlayData data source within the mega menu Layout.
• Menu ID: Optional unique identifier for the mega menu instance.

Common Use Cases:

• Displaying multi-level product category navigation
• Showing featured products or promotions within navigation
• Creating rich dropdown menus with images, descriptions, and links
• Implementing complex navigation hierarchies for large sites

💡💡💡 Tip 💡💡💡

Mega menus typically remain open while the user hovers over navigation items and close when the user moves away or clicks elsewhere. Implement this behavior using Interactions on the trigger element and the mega menu Layout itself.

📍📍📍 Note 📍📍📍

Mega menus are designed for PWA and web applications. In native applications, consider using standard navigation patterns like Bottom Bar tabs or hierarchical navigation instead.

Navigate to Tab

This Node programmatically switches the active tab in a tab-based navigation component, typically a Bottom Bar (Tab Bar) in native applications.

To configure Navigate to Tab, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Tab Index: The zero-based index of the tab to activate. For example, use 0 for the first tab, 1 for the second tab, etc.

Alternative Configuration:

• Tab ID: The unique identifier of the tab to activate, as defined in Project Settings under App Navigation.

Common Use Cases:

• Navigating to a specific tab after completing an action (e.g., go to "Orders" tab after checkout)
• Deep linking that opens the app to a specific tab
• Implementing custom navigation flows that bypass standard tap-to-switch behavior
• Redirecting users to relevant tabs based on application state

💡💡💡 Tip 💡💡💡

Use Tab Index when tab order is stable and known. Use Tab ID when tabs might be reordered or when tab configuration changes between app versions, making IDs more maintainable.

📍📍📍 Note 📍📍📍

This Node only affects tab-based navigation components. It does not navigate between Routes or change the content within a tab. To change routes within a tab's context, use the Navigate Node instead.

Preload Layout

This Node pre-loads or pre-renders a Layout in the background before the user navigates to it. This improves perceived performance by making subsequent navigation to that Layout nearly instantaneous.

To configure Preload Layout, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Layout ID: The identifier of the Layout to preload. Right-click on the desired Layout in the Structure Panel and select "Copy ID" to obtain this value.
• Route Data: Optional data to provide to the Layout during preload, similar to data that would be available through RouteData when navigating normally.

Common Use Cases:

• Preloading the next step in a multi-step form or wizard
• Loading product detail pages while browsing a product list
• Preparing checkout screens while user reviews cart
• Preloading frequently accessed pages during app initialization

💡💡💡 Tip 💡💡💡

Preload Layouts strategically based on user behavior patterns. For example, preload a product detail page when a user hovers over a product in a list, or preload the next wizard step when the current step's form is valid.

📍📍📍 Note 📍📍📍

Preloading consumes device resources (memory, CPU, network). Avoid preloading too many Layouts simultaneously, especially on mobile devices. Focus on preloading the most likely next destination.

💡💡💡 Tip 💡💡💡

Combine Preload Layout with analytics or user interaction tracking to predict which pages users are likely to visit next. Preload those pages to create a faster, more responsive experience.

Redirect

This Node navigates to a new Route while replacing the current history entry. Unlike Navigate which adds to the history stack (allowing back button navigation), Redirect replaces the current entry, preventing users from navigating back to the replaced page.

To configure Redirect, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Route: The destination route path (e.g., /products/123 or /checkout).
• Route Data: Optional data to pass to the destination Route, accessible through the RouteData data source in the destination Layout.

Common Use Cases:

• Redirecting after form submission to prevent duplicate submissions via back button (Post-Redirect-Get pattern)
• Replacing login pages after successful authentication
• Redirecting from old URLs to new URLs permanently
• Preventing users from navigating back to intermediate processing pages

💡💡💡 Tip 💡💡💡

Use Redirect instead of Navigate in these scenarios:

• After form submissions (prevents resubmission via back button)
• After authentication (prevents returning to login screen)
• When the current page should not be in history (e.g., loading or processing screens)

Use Navigate when users should be able to return to the current page using the back button.

📍📍📍 Note 📍📍📍

In PWAs and web applications, Redirect uses history.replace(). In native applications, it replaces the current screen in the navigation stack. The behavior is consistent across platforms but the underlying implementation differs.