What Is App Navigation?
App navigation is the persistent menu rendered on every page of your application. It is configured once and automatically applied everywhere — you do not add navigation blocks to individual pages. Navigation controls:
Which pages, modules, external links, and utilities users can reach
What page the app opens on (the default page)
How the menu looks and behaves at different screen sizes
Whether user profile, notifications, and language/theme controls are exposed
Note: Modules, copilot apps, walkthroughs, and template components do not have app navigation. Navigation applies only to standard web and mobile applications with pages.
Where to Configure Navigation
Navigation is configured in Settings → Development → Navigation. The settings panel has two tabs:
| Tab | What you configure here |
| Content | The menu items themselves — pages, modules, URLs, groups, brand navigation, profile, and notifications. Also where you set the app's default page. |
| Appearance | Per-breakpoint navigation style, position, label visibility, item direction, selection style, colors, spacing, transition behavior, and item order. Each breakpoint can have a different menu layout. |
Content Tab: Menu Items
The Content tab has two lists: Menu Items (primary navigation) and Secondary Menu Items (web-only, shown separately — typically at the bottom of a sidebar or end of a top bar).
Primary Menu Items
Use the Add button on the primary list to add items. The following types are available:
| Item type | What it renders | Configuration |
| Nav Item (Page) | A link to a page within the app | Target page, label, icon. Optional: Page Inputs and Dynamic Params to pass context to the page. New items default to the app's default page. |
| Nav Item (Module) | Renders a module at its own URL slug | Target module, label, icon. |
| Nav Item (URL) | An external or internal link | URL, label, icon. Opens in a new tab by default. |
| Brand Navigation | Logo slot at the head of the menu | Where the logo links: a page, a module or a URL. Typically links to the app's home page. The logo image itself comes from the app's Brand Assets (Logo and Symbol). |
| Nav Group | Named collapsible section grouping other items under an expandable heading | Group label, icon. Add child Nav Items inside the group. |
Secondary Menu Items (Web Only)
Secondary items appear in a dedicated area of the navigation (for example, at the bottom of a sidebar). Available types:
| Item type | What it renders | Notes |
| Profile | Signed-in user entry with optional profile page link | Expand to add profile-specific Menu Items: page links, URLs, buttons, Change Language, and Change Color Scheme entries. |
| Notifications | Built-in notifications drawer with unread-count badge | Badge count is capped at "99+" display. Requires notifications to be configured in the app. |
| Nav Item | Any additional secondary link or action | Page, module, or URL — same as primary Nav Item types. |
Profile Menu
The Profile item expands into a user-contextual menu. Inside it, you can add:
Page links — navigate to a profile or settings page
URL links — open external resources
Buttons — run custom interactions (for example, sign out via an action sequence)
Change Language — lists all supported languages and lets the user switch
Change Color Scheme — flips between light and dark mode
Note: If the app is public (no authentication required), the Profile entry and the user menu under it are removed from the navigation. Its configuration is kept and comes back if the app is made private again. A Notifications item is not removed automatically, so remove it yourself if a public app doesn't need it.
Default Page
The Default Page section in the Content tab controls which page the app opens on. There are two slots:
| Slot | Who it applies to | Requirements |
| Logged In User | Authenticated users opening the app | Must be a static-path page (no dynamic URL segments). Accepts optional conditions to route different user roles to different pages. |
| Logged Out User | Unauthenticated visitors (optional) | Must be a page with Public access. If not set, defaults to the login page. |
For public apps (no authentication), the app always uses the main default page regardless of sign-in state.
Note: You can't delete the page that is set as the default page. Delete Page isn't shown in its menus. To delete it, first choose a different default page here. See Pages & Routing.
Conditional Defaults for Logged-In Users
The logged-in default page slot supports conditions. This lets different user roles or groups land on different pages when they open the app. Each condition is evaluated in order; the first matching condition determines the landing page. If no condition matches, the configured default page is used as the fallback.
Example — Role-based default page
Condition 1: {{ userContext['roles'].some(role => role.name === "Admin") }} → Admin Dashboard Condition 2: {{ userContext['roles'].some(role => role.name === "Manager") }} → Manager Overview Default (fallback): → Employee Home
Admins land on the Admin Dashboard, managers on the Manager Overview, and all other users on Employee Home.
Appearance Tab: Per-Breakpoint Layout
The Appearance tab lets you configure a different menu layout for each screen-size breakpoint. Each breakpoint is configured independently — the menu can look completely different on desktop vs mobile.
Breakpoints
Breakpoint | Width range | Platform |
|---|---|---|
XL | 1280 px + | Web |
LG | 1024 – 1279 px | Web |
MD | 768 – 1023 px | Web |
SM | 0 – 767 px | Web (and Mobile apps) |
In the Appearance tab, pick a breakpoint with the four device icons under Breakpoints: laptop (XL), horizontal tablet (LG), vertical tablet (MD) and phone (SM). Hover an icon to see its width range. Mobile applications use the SM breakpoint only, so they show no Breakpoints selector.
Navigation Styles
The Navigation Style setting picks the container the menu renders in. Each breakpoint has its own style.
Style | Available on | Description |
|---|---|---|
Standard | XL, LG, MD (web) | Platform-rendered sidebar or top bar. Consistent look aligned with the app's theme. |
Custom | XL, LG, MD (web) | Fully custom layout built with blocks in a module. You supply the navigation UI entirely. See Custom Navigation Module. |
Bottom Bar | SM | Fixed bar at the bottom of the screen. Limited to plain page items — no groups, no user menu, no secondary items. |
Drawer | SM | Slide-in navigation drawer, typically triggered by a hamburger button. |
None | SM | No navigation rendered at this breakpoint. |
Per-Breakpoint Appearance Settings
Setting | Options / Notes |
|---|---|
Position | XL: Start or Top. LG and MD: Start, Top or Bottom. SM: Bottom for the Bottom Bar style, Start or End for the Drawer style. Web sidebars and top bars can also be Anchored or Floating. |
Labels | XL with a start or top bar: Expand to Show on Hover, Show upfront, Show in tooltip or None. Other breakpoints: Show upfront or None. |
Selection Style | Stroke (outline, the default) or Solid (filled background). Not offered for a top bar. |
Direction | Column or Row icon-and-label layout within each item. Shown only when labels are set to Show upfront. |
Colors & spacing | Background, Text and Icon colors of each entry (Default, Hover and Active), plus item padding and gap. Background here is the area behind each entry, not the bar. The bar's fill comes from the theme's Navigation Background Colour. See Nav Appearance. |
Page Transition | Fade or Slide Horizontal, played when navigating between pages. Web apps only. |
Item order | Drag items to reorder. Use the eye icon to show or hide an item at this breakpoint. In a web app, the Menu Items list also has a Hidden in overflow area. An item you drag there is removed from the navigation at this breakpoint. The running app doesn't show a "More" overflow menu yet, so users can't reach that item from the navigation. |
Item-Level Breakpoint Visibility
Each navigation item has its own Breakpoint Visibility toggles in its Content tab settings. They match the breakpoints like this:
Desktop: XL
Tablet Horizontal: LG
Tablet Vertical: MD
Mobile: SM
All four are on by default, so a new item appears at every breakpoint. Turn a toggle off to hide the item at that breakpoint. The eye icon in the Appearance tab changes the same setting for the breakpoint you are editing. Mobile apps don't show these toggles.
Mobile-Specific Behavior
Behavior | Details |
|---|---|
Item limit | A mobile app's primary menu accepts up to 15 items (the Add button disables at 15). The bottom bar has no "More" overflow menu, so every item you add appears as a tab. Keep a bottom bar to about 5 items, or use the Drawer style for more. |
Deduplication | If multiple items point to the same page, duplicates are automatically removed from the mobile menu. |
Bottom bar restrictions | The Bottom Bar style only supports plain page items. Nav groups, the user menu, secondary items, and URL items are not supported in the bottom bar. |
Bottom bar page visibility | Pages not included in the bottom bar have the bar hidden while that page is open. |
Permission-Restricted Items
Navigation items can be restricted by role or permission. When a user does not have access to a restricted item:
The item is silently removed from the menu — it does not appear as greyed out or locked.
This behavior applies only in the published app. In the builder and preview, all items are shown regardless of permissions so you can design and test freely.
Quick Setup Guide
Open Navigation settings: Go to Settings → Development → Navigation.
Add primary menu items: On the Content tab, click Add in the primary list. Add a Nav Item for each page users should reach from the menu. Set the label and icon for each item.
Add secondary items (optional): Add a Profile item and/or Notifications item to the secondary list if your app supports user accounts. Configure the profile menu's sub-items including Change Language and Change Color Scheme as needed.
Set the default page: In the Default Page section, select the page the app should open on for logged-in users. Optionally configure conditions for role-based routing. If needed, set a separate default for logged-out users.
Configure appearance per breakpoint: Switch to the Appearance tab. For each breakpoint, set the navigation style, position, label behavior, and visual styling. Test the layout at each breakpoint using the builder's responsive preview.
Review in preview: Use the builder's preview mode and toggle between breakpoints to confirm the menu looks and behaves correctly before publishing.