What Is Custom Navigation?
Custom navigation lets you replace your app's built-in navigation bar with a module you design yourself. Instead of the standard nav, the app renders a module in its place — so the tabs, buttons, and layout of the nav bar become blocks you lay out in the module builder, wired to whatever data and logic you want.
Use custom navigation when the built-in navigation is not flexible enough for your needs — for example, when you need dynamic items, custom styling beyond what the theme provides, or behavior tied to your app's data.
How It Works
You turn on custom navigation from your app's navigation settings, then assign a module to act as the nav bar:
| Screen size | What's required |
| Mobile apps and small screens (SM) | Assign a module — that module replaces the built-in bottom navigation immediately. |
| Larger screens (MD, LG, XL) | First switch the navigator type to Custom, then assign the module. Both steps are required. |
Once both are set, the app draws your module wherever its navigation would normally appear.
Configuration Per Screen Size
Custom navigation is configured independently for each screen size — the largest desktop width XL, down through LG and MD, to the small phone-sized SM. You can:
Assign a custom module on one size and keep the built-in navigation on others
Assign a different module per size
Leave some sizes on the default navigation while customizing others
Tip: A common setup: a custom module for SM (phones), with the standard navigation left in place on wider breakpoints.
Setting Up Custom Navigation
Open the app in the builder and navigate to Settings → Navigation.
Select the screen size you want to configure (XL, LG, MD, or SM).
For larger screens: switch the navigator type to Custom.
Assign a module as the navigation — either pick an existing module or create a new one for this purpose.
A Customise link appears, which takes you straight into the module builder for the assigned module.
Build your navigation inside the module builder using any blocks and logic you need.
Publish the module, then publish the app to see the custom navigation in the live app.
Building the Navigation Module
The navigation module is an ordinary module — it has all the same tools and freedom as any other module. Key design considerations:
Navigation items — use buttons, icon buttons, or link components wired to page navigation actions.
Active state — use conditionals to highlight the currently active item based on the current page.
Dynamic items — bind navigation items to a data source if your nav structure changes based on user permissions or other data.
Responsive layout — use flex layout to arrange items horizontally (top nav) or vertically (side nav) based on the module's container size.
Note: The Customise link in Navigation settings opens the assigned module's builder directly, so you can jump from assigning to designing the nav in one step.
Removing Custom Navigation
Removing the assigned module from a screen size reverts that breakpoint to the built-in navigation.
When you delete the module that was serving as navigation, its assignment is cleared from every screen size at once — not just the one you were looking at. A deleted nav module never leaves a dangling reference on another breakpoint.
Trade-offs & Gotchas
Custom navigation is per screen size — skipped sizes keep the built-in bar. Assigning a navigation module on SM does nothing for MD, LG, or XL. When you intend the same custom nav everywhere, set it on each size you support.
On large screens, choosing Custom without a module leaves navigation empty. The switch to Custom navigator type and the module assignment are two separate steps. Select Custom but never assign a module, and there is nothing to render in the nav bar's place — both parts must be set before your module appears.
Deleting a nav module removes it from the whole app, not one screen size. Remove the assignment on a single size instead if you only want to stop using it there.
The navigation module is live-linked like any other module. Editing it changes the nav bar across every page immediately — treat it like any shared module and test changes before deploying.
Frequently Asked Questions
Do I need a different nav module for each screen size?
No, but you can. Each breakpoint (XL, LG, MD, SM) is configured independently, so you can assign the same module to all sizes or different modules per breakpoint. If you use the same module everywhere, assign it on each size — the assignment doesn't propagate automatically across breakpoints.
What happens if I delete the module used for navigation?
Deleting the navigation module clears its assignment from every screen size at once — not just one breakpoint. The app reverts to the built-in navigation on all sizes.
I set the navigator to Custom but nothing shows up. Why?
On larger screens (MD, LG, XL), switching to the Custom navigator type is only the first step — you also need to assign a module. If no module is assigned, there is nothing to render in the nav bar's place and it stays empty. Assign a module after switching to Custom.
Can I dynamically change which nav items are shown based on user permissions?
Yes. The navigation module is a full module with its own data sources and logic. Bind nav item visibility or content to your permissions data source, and the nav bar will reflect the current user's access level.
Related Pages
Modules Overview — the module concept
Building a Module — authoring module content
Packages & Modules Screen — creating modules from the Applications area