Go to websiteGet a demo

Pages & Navigation

Pages are the different views or screens you create to logically organize your application's functionality. This guide covers how to manage your app's pages and the different methods for allowing users to navigate between them.

Managing Pages

Pages vs. Subpages

An app can have an unlimited number of pages and subpages, which create a parent-child hierarchy. The key difference is:

  • Pages appear in the app's main navigation menu.

  • Subpages do not appear in the main menu and must be accessed via other methods, like a button link.

Page one with a subpage and page three with two subpages.

Creating & Duplicating Pages

To add a new page or subpage, right-click on an existing page in the Pages Panel:

  • Select New Page to create a new top-level page.

  • Select New Subpage to create a child page.

To save time, you can also Duplicate any existing page or subpage using the same right-click context menu.

Deleting Pages

To delete a page or subpage, right-click on it and select Delete Page.

Adjusting Page Height

To add more vertical space to a specific page and make it scrollable, click the Page Height icon [] in the App Builder's toolbar. You can increase the height for the currently selected page and device size.

If you try to reduce a page's height and it doesn't change, a widget is likely positioned outside the newly selected area. You will need to move or delete that widget before the height can be reduced.

In-App Navigation

There are three different ways to allow users to navigate between the pages of your app. You can use any combination of these methods: Navigation menu, widget navigation, and function call navigation.

1. The Navigation Menu

This is the main menu for your app. It is automatically activated when you add a second page and appears on all pages and subpages.

Editing the Menu

To configure the menu, click the Navigation icon [] in the App Builder's top bar. Here you can set an App Bar Title and choose the menu type.

Menu Types

  • None: No main navigation menu.

  • Bottom tabs: (Default) A tab bar at the bottom of the screen.

  • Menu drawer: A classic "burger" menu that slides out from the top or left.

Default navigation: Bottom tabs
Default navigation: Bottom tabs

Editing Menu Items & Page Order

In the navigation settings, you can click on any page to edit its menu properties, such as its Text label and Icon. You can also reorder your pages for the menu using the up and down arrows.

In-app navigation editor

2. Widget Navigation

You can turn any button or icon into a navigation link. This is the primary way to allow users to access subpages.

To create a link, simply drag a page or subpage from the Pages Panel and drop it onto a button or icon in the UI Builder.

3. Function Call Navigation

You can also trigger navigation programmatically from your backend logic. To do this, drag a page or subpage from the Pages Panel and connect it to a function's output in the Flow Builder. When that output is triggered, the app will automatically switch to the linked page. This is useful for conditional navigation (e.g., using a Filter to send a user to a success or error page).

Last updated