Navigation best practices

Picking the correct navigation area type is one of the most impactful decisions in process design. A wrong choice leads to broken flows, inconsistent behavior across platforms, and poor user experience. Use this guide to decide when to use each navigation type and how to combine them correctly.

The most common mistake is using a modal when a page is needed, or chaining modals together. Here is how to decide:

Use a Page when...
Use a Modal when...

The user needs to complete a full step in a flow (data entry, review, confirmation)
The content is part of the main journey and not an interruption
The user might need to navigate back to this screen
The flow involves multiple sequential tasks (use Wizard navigation type)
The content is complex or long (forms, tables, document reviews)

Examples: Personal data form, account setup steps, document upload, application review

Quick decision flowchart

Ask yourself these questions in order:

Is it a temporary interruption?

If the user will do one thing and return to where they were, consider a Modal.If the user is progressing to a new step in the flow, use a Page (or Step in a Stepper).

Does it lead to another screen?

If completing the task leads to navigating somewhere else (not just dismissing), it should be a Page, not a modal.

This is the most common mistake. If your modal opens another modal or navigates to a page after completion, it should not be a modal.

Is the content complex?

If the screen has multiple form fields, validation logic, or scrollable content, use a Page.Modals work best for simple, focused interactions (1-3 fields maximum).

Does the user need to go back?

Modals have no back navigation. If users might need to return to this screen from a later step, it must be a Page within a Stepper or Wizard.

Hard rules for modals:

No modal over modal — do not open a modal from within another modal. Stacking modals is an unsupported pattern that causes layering, z-index, and dismiss behavior issues.
No two modals simultaneously — only one modal should be active at a time. The renderer does not reliably handle concurrent modals.
Modals are not navigation containers — do not use modals to wrap pages or other navigation areas as children.
Do not use modals as loaders — loading states should be handled with UI component properties (loaders, skeletons), not by opening a modal overlay.

A modal should not contain child navigation areas. It can contain user tasks and trigger workflows (including via On Load events), but it is not a container for pages, steppers, or other navigation structures. In the Designer’s Navigation view, you build a tree of navigation areas. Child navigation areas are areas nested inside a parent. Here is what a correct vs incorrect navigation tree looks like:

Correct
Incorrect

Correct navigation structure — modal as leaf under a step

The modal sits under a Step as a leaf — it contains user tasks but no child navigation areas.

📂 Zone 1
└── 📋 Stepper 1
    ├── ─○ Step - "Personal Data"
    ├── ─○ Step - "Documents"
    └── ─○ Step - "Review"
        └── 🪟 Modal - "Confirm Submit"    ← leaf, no child areas

The modal is triggered as a brief interruption (e.g., “Are you sure?”) and dismissed to return to the step.

Here the modal is used as a navigation container with areas nested inside it. The Designer allows this, but it causes rendering and dismiss behavior issues.

🪟 Modal - "OTP Flow"
└── 📂 Zone                                ❌ zone nested inside modal
    └── 📋 Stepper
        ├── ─○ Step - "Enter OTP"          ❌ flow steps inside modal
        └── ─○ Step - "Verify OTP"

Another common mistake — using multiple modals as sequential flow steps:

📄 Page - "Enter Phone"
🪟 Modal - "Sending..."                    ❌ modal used as loader
🪟 Modal - "Enter OTP"                     ❌ second modal in sequence
📄 Page - "Confirmation"

Rule of thumb: A modal can contain user tasks, but never other navigation areas. Don’t nest pages, steppers, tabs, or other modals inside it.

A modal should overlay the current screen as a temporary interruption and return to the same context when dismissed:

Main flow:  [Page A] → [Page B] → [Page C]
                          ↓ ↑
                        [Modal]     ← brief interruption, returns to Page B or advances to Page C

Do not chain modals as sequential steps in the navigation:

❌  [Page] → [Modal] → [Modal] → [Page]     ← stacking modals is unsupported
❌  [Page] → [Modal] → [Page] → [Modal]     ← modals are not steps in a flow

In UI Flows, modals are navigation areas that you navigate to using the Navigate To UI action. The modal adds a modalId to the URL, which supports deep linking and survives page refresh. Use the Dismiss modal option or browser back to close.

The table below shows what the Designer allows you to add as child areas, and what you should actually use.

Parent area	Designer allows	Recommended use
Root (blue +)	Stepper, Tab Bar, Page, Modal, Zone, Parent Process	Start with Zone (web) or Tab Bar (mobile)
Zone	Zone, Stepper, Tab_bar	Stepper for multi-step flows, Tab_bar for section-based layouts
Stepper	Step	Add one Step per stage in the flow
Step	Stepper, Modal, Zone, Tab_bar	Modal for confirmations, nested Stepper for sub-flows (max 2 levels)
Tab Bar	Tab	One Tab per section
Tab	Zone, Modal, Tab_bar	Zone or Tab_bar for complex tab content
Page	Modal, Zone, Tab_bar	Modal for brief interruptions only
Modal	Zone, Tab_bar	Don’t nest anything under modals — treat as leaf

The Designer does not prevent you from nesting areas under a Modal. This doesn’t mean you should. Nesting zones or tab bars inside a modal is a misconfiguration that causes rendering and dismiss behavior issues.

Patterns that work

Zone with Stepper

Zone (header/footer) containing a Stepper with Steps. Each Step holds user tasks with form content.Use for: Multi-step flows with persistent header/footer (web).

Stepper with confirmation Modal

Stepper with Steps for each stage. One Step contains a Modal for a brief confirmation before submission.Use for: Forms that need an “Are you sure?” prompt before submit.

Page with Wizard navigation

Single Page area with Wizard navigation type. Displays user tasks one at a time with Next/Back buttons.Use for: Sequential data entry without visible step indicators.

Tab Bar with Tabs

Tab Bar at root level with Tabs for each section. Each Tab can contain its own content and actions.Use for: Multi-section apps where users switch between areas.

Patterns that break

Modal chain

Modal → Modal (hierarchical or sequential). Modals cannot open other modals.Fix: Convert the sequence into Stepper steps or Wizard pages.

Modal as flow step

Page → Modal → Page where the modal is a step in the journey, not an interruption.Fix: Replace the modal with a Page or Step.

Modal as loader

Opening a modal to show a loading spinner while a backend operation completes.Fix: Use the loading state properties on UI components (loader overlays, skeleton screens).

Deep nesting

Zone → Stepper → Stepper → Stepper (more than 2 levels of stepper nesting).Fix: Break the flow into separate processes or subprocesses.

Common scenarios

One-time password (OTP) verification

Recommended
Avoid

Use a Stepper or Page with Wizard navigation:

Step 1 (Page): User enters phone number
Step 2 (Page): User enters OTP code with a resend option
Step 3 (Page): Confirmation / next step in the flow

Each step is a proper page with back navigation support and clear progress indication.

Confirmation before submission

Recommended
Avoid

Use a Modal for the confirmation dialog:

User completes the form on a Page
User clicks Submit
A Modal appears: “Are you sure you want to submit?”
User confirms → modal dismisses → process continues

The modal is a brief interruption with a single action.

Terms and conditions

Recommended
Avoid

Use a dismissable Modal:

User reaches a step that requires accepting terms
User clicks “View Terms” → a Modal opens with the full text
User reads and dismisses the modal
User checks the acceptance checkbox on the Page and continues

Configure the modal as dismissable (backdrop click or close button).

Multi-section dashboard

Recommended
Avoid

Use a Tab Bar with Pages for each section:

Tab 1: Account overview (Page)
Tab 2: Transaction history (Page)
Tab 3: Settings (Page with Wizard if multi-step)

On mobile, the Tab Bar must be the root navigation area.

Scenario	Navigation type	Why
Multi-step form with progress	Stepper	Users see where they are and can go back
Sequential tasks without step indicators	Page (Wizard)	Guided flow with Next/Back, no visible steps
All fields on one screen	Page (Single page form)	Parallel display, use cards to group sections
Brief confirmation or acknowledgment	Modal	Quick interruption, single action, dismiss and return
Supplementary info (help, terms)	Modal (dismissable)	Read-only content that doesn’t affect the main flow
Multi-section app	Tab Bar	Parallel access to different areas
Persistent header/footer (web)	Zone	Layout container for branding and global actions

Navigation areas

Configuration reference for all navigation area types.

UI Designer best practices

General best practices for building interfaces.

Getting Started

Concepts

FlowX.AI Designer

Building projects

Building blocks

Platform deep dive

API reference

Navigation best practices

Choosing the right navigation pattern

Quick decision flowchart

What “child navigation areas” means

How modals fit in the navigation flow

Valid navigation combinations

Navigation area nesting reference

Patterns that work

Zone with Stepper

Stepper with confirmation Modal

Page with Wizard navigation

Tab Bar with Tabs

Patterns that break

Modal chain

Modal as flow step

Modal as loader

Deep nesting

Common scenarios

One-time password (OTP) verification

Confirmation before submission

Terms and conditions

Multi-section dashboard

Navigation selection guide

Navigation areas

UI Designer best practices

Getting Started

Concepts

FlowX.AI Designer

Building projects

Building blocks

Platform deep dive

API reference

​Choosing the right navigation pattern

​Page vs modal: the core decision

​Quick decision flowchart

​Modal rules

​What “child navigation areas” means

​How modals fit in the navigation flow

​Valid navigation combinations

​Navigation area nesting reference

​Patterns that work

Zone with Stepper

Stepper with confirmation Modal

Page with Wizard navigation

Tab Bar with Tabs

​Patterns that break

Modal chain

Modal as flow step

Modal as loader

Deep nesting

​Common scenarios

​One-time password (OTP) verification

​Confirmation before submission

​Terms and conditions

​Multi-section dashboard

​Navigation selection guide

​Related resources

Navigation areas

UI Designer best practices

Choosing the right navigation pattern

Page vs modal: the core decision

Quick decision flowchart

Modal rules

What “child navigation areas” means

How modals fit in the navigation flow

Valid navigation combinations

Navigation area nesting reference

Patterns that work

Patterns that break

Common scenarios

One-time password (OTP) verification

Confirmation before submission

Terms and conditions

Multi-section dashboard

Navigation selection guide

Related resources