Navigate

This node triggers navigation to a specific page or component.

The Navigate (or Push Component To Stack) node transitions the user to a new view.

The Navigate node is used to move the user between pages or components within a Page Stack. It supports pushing new pages onto the stack (history) or replacing the current page. It handles passing parameters to the target page and managing transition animations.

Inputs

General

Data	Description
Stack	The name of the Page Stack to navigate within. Default: "Main".
Target Page	The specific Page node or Component to navigate to.
Mode	Navigation mode: "Push" (add to history) or "Replace" (replace current history entry). Default: "Push".

Transition

Data	Description
Transition	The animation style to use (e.g., "Push", "Fade", "Modal").

Parameters

Data	Description
*	Dynamic inputs appear here based on the Target Page. If the target page has a URL like user/{id} or defined inputs, you will see ports like id here to pass data.

Actions

Signal	Description
Navigate	Triggers the navigation action.

Outputs

Events

Signal	Description
Navigated	Triggered when the navigation successfully completes.

Back Results

Data	Description
*	Dynamic outputs appear here if the target page has a "Navigate Back" node that returns data. This allows you to get results from a modal or workflow (e.g., "Selected User ID").

Back Actions

Signal	Description
*	Dynamic signal outputs corresponding to actions from the target page (e.g., "On Cancel", "On Save").

Usage

Basic Navigation

1. Select the Target Page from the dropdown list.
2. Connect a trigger (e.g., Button Click) to the Navigate input.

Passing Data

If the target page needs data (e.g., a Product Detail page needs a Product ID):

1. Ensure the target page is configured with parameters (e.g., URL path product/{id}).
2. The Navigate node will automatically show an input port for id.
3. Connect the Product ID to this port.

Handling Results (Modal Pattern)

1. Navigate to a "Selector" page.
2. On the Selector page, use a Navigate Back node and configure it to return a value.
3. On the original Navigate node, a corresponding output port will appear. Connect this to handle the returned value.

Detailed Behavior

• Stack Management: "Push" adds to the browser history stack. "Replace" modifies the current entry, preventing the "Back" button from returning to the previous state.
• Dynamic Ports: This node is highly dynamic. Its inputs and outputs change based on the selected Target Page.

Troubleshooting

• Target Not Found: If the dropdown is empty, ensure you have created Page nodes and they are connected to a Page Stack.
• Parameters Not Showing: Save the project or refresh the graph if recently added page parameters don't appear immediately.