You can configure navigation for your app via the Navigation section of the global toolbar at the top.
Navigation header bar
This section configures if the navigation header bar at the top of the app should be enabled or disabled for all pages. Additionally, you can decide if you want to show the current page's name in the header bar or a static text.
It is currently not possible to add buttons to the navigation bar, apart from the system native back button that appears.
Navigation menu
This section defines the native navigation menu for your app.
By default, the navigation menu is enabled. If you disable it, you need to define the single initial page for your app.
The navigation menu is different depending on the platform:
Native iOS/Android – horizontal tabs at the bottom of the screen
Mobile web browser – hamburger menu opened via the navigation header bar
Web browser – vertical tabs on the left side of the screen
For each navigation menu item, you can configure icon, tab name and page the tab points to.
You can change the order of the menu items via drag-an
Styling the navigation elements
Navigation header bar and tab bar colors are determined by the theme variables under the Native theme group.
Navigating between pages
You can use the Open page flow function to navigate to a new page.
The Parameters property lets you pass data to the newly opened page – the values set in the flow function will be available as page parameters in the opened page.
Going back
To navigate to the previous view, you can use the native back button on mobile, or the browser back button in web.
Alternatively, you can call the Navigate back flow function.
To go back multiple pages, you can use the optional Number of pages input argument.
Navigation stack
Composer navigation operates on the concept of a navigation stack.
A navigation stack has a root page, on top of which additional pages can be opened. Calling Navigate back on the root page does nothing.
In a mobile app that has tab navigation, every tab has its own navigation stack. Thus, switching between tabs preserves the state of each tab.
On web, the navigation stack exists – if you switch to a new tab and try to use Navigate back it fails – but the native navigation history tracks across tabs. Thus, switching from tab A to tab B and clicking the browser native back button brings you back to tab A.
To go back to the root of the navigation stack, there's the Navigate back to root flow function.
Setting target page dynamically
In some cases, you might want to choose the target page dynamically. For example, you have a repeated list, but clicking an item in the list should navigate to a specific page depending on the item type.
However, since the selected page ID determines what parameters can be passed to the opened page, it's not possible to set a dynamic target page with a single Open page flow function – that would mean the schema of the parameters object would be completely dynamic, which is not something we want to encourage.
Instead, what you want to do is use an If condition flow function to split the logic into two paths depending on e.g. a field of the current object (in the case of a repeated iitem), and then have two separate Open page nodes that each open a different page.