Navigation

Momen provides multiple navigation Actions for in-app routing and external links. This reference covers each Action’s purpose, configuration, and typical use cases for Web and Native App.

Navigation Actions include:

1. Push to page
2. Redirect
3. Back
4. Open in new tab
5. Open external link

Platform differences:

Push to Page

Navigate to a target page while keeping navigation history so the user can return.

Purpose

Pushes a new page onto the navigation stack:

• Preserve history: User can go back to the previous page
• Pass data: Supports page parameters and data binding
• Flow navigation: Multi-step forms, detail views, and other flows that need back navigation
• Deep browsing: Multiple stacked pages

Configuration and Output

Parameters:

• Target page (required): Page to open
  • Type: Page picker
  • Supports any page in the app
• Page parameters (optional): Data passed to the target page
  • Type: Key-value pairs
  • Supports fixed values, page variable binding, and component data binding

Output:

• No direct output
• Passed parameters are available on the target page as page parameters

Platform notes:

• Native App: Navigation stack depth may be limited by the runtime; configure an explicit Back Action where needed.
• Web: No push depth limit; users can also use the browser back button.

Usage Examples

Scenario 1: Product detail

Trigger: Product list item
Target page: Product detail
Page parameters:
  - product_id: Product ID
  - from_page: "list"
Purpose: View product details and return to the list

Scenario 2: Multi-step form

Trigger: Next button
Target page: Form step 2
Page parameters:
  - form_data: Data from step 1
  - step_number: 2
Purpose: Step through a form with forward/back navigation

Redirect

Replace the current page (or reset the navigation stack) and open a target page without keeping the previous page in history.

Purpose

Jump to a page as a new starting point:

• Main module navigation: Home, categories, and other primary destinations
• Reset navigation stack: Clear back history; target page becomes the new root
• End one-time flows: After checkout or onboarding, land on a main screen
• Auth redirects: Send unauthenticated users to login

Configuration and Output

Parameters:

• Target page (required): Page to open
  • Type: Page picker
• Page parameters (optional): Data passed to the target page
  • Type: Key-value pairs
  • Supports fixed values, page variable binding, and component data binding

Output:

• No direct output
• Previous pages are not kept in the back stack (behavior depends on platform)

Platform notes:

• Web and Native App: Supported on both platforms.

Usage Examples

Scenario 1: Quiz complete → home

Trigger: Submit quiz button
Target page: Home
Page parameters:
  - score: Quiz score
  - completed: true
Purpose: Return to home after quiz; cannot navigate back to the quiz page

Scenario 2: Payment complete → store home

Trigger: Confirm on payment success
Target page: Store home
Page parameters:
  - order_id: Order ID
  - payment_status: "success"
Purpose: End payment flow at the store home page

Scenario 3: Logout

Trigger: Logout button
Target page: Home or login page
Page parameters:
  - logout: true
Purpose: Clear navigation history and return to app entry

Back

Return to the previous page in the navigation stack.

Purpose

• Explicit back control: Back button in custom UI
• Cancel flows: Leave a form or modal flow without Redirect

Configuration and Output

Parameters:

• None

Output:

• No direct output

Platform notes:

• Native App: Pops one level from the navigation stack.
• Web: Equivalent to browser history back when history exists; otherwise may have no effect.

Usage Examples

Scenario: Cancel edit

Trigger: Cancel button on edit profile page
Action: Back
Purpose: Return to the previous screen without saving

Open in New Tab

Open a URL in a new browser tab without leaving the current page.

Purpose

• External resources: Documentation, help sites, partner pages
• Parallel browsing: View another page while keeping current state
• Better UX on Web: Non-destructive navigation for reference content

Configuration and Output

Parameters:

• Target URL (required): URL to open in a new tab
  • Type: String
  • Supports internal pages and external links
  • Format: Full URL

Output:

• No direct output
• New tab runs independently

Platform notes:

• Web only

Usage Examples

Scenario: Open help documentation

Trigger: Help button
Target URL: https://help.example.com/user-guide
Purpose: Open docs in a new tab while the user continues on the current page

Open External Link

Open a specified URL or special protocol link when the user interacts with a component.

Purpose

• Websites: Navigate to external sites
• Communication: Phone (tel:) and email (mailto:) links
• Downloads: File download URLs
• In-page anchors: Jump to #section-id on the current page
• Custom protocols: As supported by the platform

Configuration and Output

Parameters:

• Link URL (required): Destination link
  • Type: String
  • Supported formats:
    • HTTP/HTTPS: https://example.com
    • Phone: tel:+1-555-123-4567
    • Email: mailto:user@example.com?subject=Inquiry
    • Download: https://example.com/file.zip
    • Anchor: #section-id
    • JavaScript pseudo-protocol: javascript:void(0);
    • Placeholder: #
• Query parameters (optional): Append URL query string, e.g. ?utm_term=gw&utm_medium=gw

Output:

• No direct output
• Behavior depends on link type (browser, mail client, dialer, etc.)

Platform notes:

• Web and Native App: External HTTPS links typically open in the system browser or in-app browser, depending on platform settings.

Usage Examples

Scenario 1: Contact support

Trigger: Support phone button
Link URL: tel:+1-400-123-4567
Purpose: Start a phone call

Scenario 2: Send feedback email

Trigger: Feedback button
Link URL: mailto:feedback@example.com?subject=User feedback&body=Enter your suggestion...
Purpose: Open the mail client with a pre-filled message

Scenario 3: Partner website

Trigger: Learn more button
Link URL: https://partner.example.com?utm_source=app&utm_medium=button
Purpose: Open partner site with tracking parameters