In-App Navigation
Last updated
Last updated
In-app navigation allows navigating between pages of an app. There are three different ways to navigate within an app:
Via navigation menu
Via widget
Via function call
One app can use one or more of these navigation methods in any combination.
The main menu of an app is automatically active when you add a second page to the app. The default navigation menu is bottom tabs.
The navigation menu appears on all pages and subpages.
To edit the navigation menu, click on the navigation icon in the top bar.
With the field App Bar Title you can add a static title to all pages of your app.
There are 3 types available:
None: No navigation menu at all
Bottom tabs: Navigation via tabs at the bottom of an app. As soon as the maximum number of side-by-side tabs for a specific screen size has been reached, the bottom tabs become horizontally scrollable.
Menu drawer: A classic burger menu that you can configure in more details afterward. It is possible to adjust the position (top or left) as well as the opening mode (push or overlap) of the menu drawer.
When changing the type of navigation, it is automatically applied to all screen sizes. Defining a navigation type per device type is not possible.
In the navigation settings, click on the page you want to edit the menu item for to open the configuration menu.
Enter a name for each menu item with the field Text. By default, the items are called Page 1, Page 2, and so on.
Optionally, you can pick a custom icon for each menu item with the Select icon field.
To change the order of pages:
Click on the navigation icon in the top bar.
All subpages of a page will change their position together with the page they belong to.
As a replacement or addition to the navigation menu, pages and subpages can be reached by linking them with icons and buttons. Each page and subpage can be linked as often as you like.
To link a page or subpage, follow these steps:
Click on an icon or on a button in the UI editor.
Drag and drop the page or subpage you want to link to the selected icon or button.
You can also link a page to a function output or modifier by dragging the pages in the same way used to connect to widgets. When the selected output is triggered, the app will switch to the linked page.
You can also link different pages to modifiers preceded by a filter, so that the filter condition determines which page to navigate to.
Click on the arrow icons ( or ) next to the menu item to change the position of the page.
