How Responsive Navigation Works
UnifyApps apps run on a single codebase across mobile, tablet, and desktop. Navigation is one of the most visible differences between these form factors — a bottom tab bar that works perfectly on a phone feels cramped and out-of-place on a 1440 px wide monitor. The responsive navigation system lets you configure a completely different navigation structure per breakpoint, with the same pages, links, and content underneath.
The navigation system applies breakpoint-specific settings automatically based on the current viewport width. No JavaScript or conditional logic is needed on your part — you configure each breakpoint once and the platform handles the switching.
Breakpoints
UnifyApps uses four breakpoints for navigation configuration. These are the same breakpoints used across the rest of the platform.
| Breakpoint | Label | Viewport width | Typical device |
| SM | Small | 0 – 767 px | Mobile phones, narrow browser windows. Mobile apps (React Native) always use SM. |
| MD | Medium | 768 – 1023 px | Tablets in portrait, large phones in landscape, narrow desktop windows. |
| LG | Large | 1024 – 1279 px | Tablets in landscape, standard laptop screens (13–14 inch). |
| XL | Extra Large | 1280 px + | Desktop monitors, large laptops (15 inch+), wide browser windows. |
Note: Each breakpoint is configured on its own. A breakpoint you never touch uses the defaults: a Standard bar at the start (side) on XL, LG and MD, and a bottom bar on SM. Configure every breakpoint whose look you want to change.
Default Layout per Breakpoint
If you don't change a breakpoint, the navigation uses these defaults:
Breakpoint | Default layout | What you can change |
|---|---|---|
XL | A side bar at the start of the screen. | Navigation Style: Standard or Custom. Position: Start or Top. |
LG / MD | A side bar at the start of the screen. | Navigation Style: Standard or Custom. Position: Start, Top or Bottom. |
SM | A bottom bar. | Navigation Style: Bottom Bar, Drawer or None. |
A top bar appears only when you set Position to Top. A drawer is available only at SM.
Configuring Responsive Overrides
To set a different navigator type or style at a specific breakpoint:
Open Settings → Development → Navigation → Appearance: The Appearance tab shows the current navigation configuration. The four device icons under Breakpoints at the top switch between breakpoint views: laptop (XL), horizontal tablet (LG), vertical tablet (MD) and phone (SM).
Select the target breakpoint: Click the breakpoint you want to change. The panel updates to show that breakpoint's settings.
Change the Navigation Style: At XL, LG and MD, choose Standard or Custom (a module you build). At SM, choose Bottom Bar, Drawer or None.
Configure breakpoint-specific appearance: With the breakpoint selected, all appearance properties (position, colours, sizes, labels) apply to that breakpoint only. Other breakpoints keep their own settings or the defaults.
Preview at each breakpoint: In Preview mode, use the viewport size controls in the preview toolbar to test each breakpoint. The builder's device simulation shows the navigation adapting in real time as you resize.
Hiding Navigation on Small Screens
At the SM breakpoint, set Navigation Style to None to hide the navigation entirely on small screens. This is useful when your app has no navigation at the smallest screen size — for example, a single-page or wizard-style app. None is not available at XL, LG or MD.
To hide individual items rather than the whole bar, use each item's Breakpoint Visibility toggles in the Content tab, or the eye toggle next to the item in the Appearance tab's Menu Items list.
Note: In a web app, the Appearance tab's Menu Items list also has a Hidden in overflow area. An entry you drag there is removed from the navigation at that breakpoint. The running app doesn't show a "More" overflow menu yet, so users can't reach that entry from the navigation. To hide an entry on purpose, use the eye icon or Breakpoint Visibility.
Side Navigation Options
When the bar sits at the start of the screen (Position Start), you can adjust how it looks at that breakpoint:
Width — how wide the side bar is.
Labels — how item labels appear. At XL: Expand to Show on Hover, Show upfront, Show in tooltip or None. At LG and MD: Show upfront or None. For a compact, icon-first side bar, choose Expand to Show on Hover or Show in tooltip at XL, or None at LG and MD.
Position Type — Anchored to the edge of the screen, or Floating.
Tablet Breakpoint Considerations
The MD breakpoint (768–1023 px) is the most nuanced in terms of navigation, because tablets are held in both orientations and used with both touch and keyboard/mouse input. Common approaches:
Approach | MD setting | Best for |
|---|---|---|
Side bar (default) | Standard, Position Start | Apps used on tablets as a primary device. Set Labels to None for a compact, icon-only side bar, or Show upfront to keep labels visible. |
Top bar | Standard, Position Top | Apps with a few top-level sections, where you want the full width for content. |
Bottom bar | Standard, Position Bottom | Apps primarily targeting mobile — tablets get a mobile-like experience. |
Custom module | Custom | Fully custom navigation — a bespoke tablet navigation designed specifically for that form factor. |
Custom Responsive Navigation
If the built-in navigation styles are not flexible enough, build your own navigation bar as a module and use the Custom navigation style. Select a breakpoint (XL, LG or MD), set Navigation Style to Custom, and pick your module. The module then renders as the whole navigation bar at that breakpoint. See Custom Navigation Module for the full setup.
Warning: The standard navigation highlights the active item automatically. In a custom navigation module, you compute the active state yourself — for example, by comparing {{location.pathname}} with each item's page path.