docs/docs/en/interface-builder/ui-layout/mobile.md
In NocoBase, the mobile layout is used to build dedicated navigation and pages for mobile devices. It is available at /mobile by default and uses a bottom tab bar as its primary navigation, making it more suitable for data entry, lookup, approval, and task processing on a phone.
The mobile and desktop layouts use the same data sources and business data, but their menus, routes, and page content are configured separately. This lets you reorganize pages around mobile workflows without being constrained by the desktop page structure.
<!-- Add a full-page screenshot of the mobile layout on a physical device -->By default, you can click 「Mobile」 in Settings to open the layout, or visit /mobile directly.
It is best to build pages in a desktop browser. The desktop view provides a mobile preview area and a toolbar at the top:
After building the pages on a computer, scan the QR code and check them on a physical device. Pay particular attention to navigation, scrolling, form input, pop-up pages, and safe areas.
The mobile layout uses a bottom tab bar as its primary navigation. Primary navigation currently supports mainly pages and links.
To open an internal or external URL, select 「Link」 and configure its title, icon, and URL.
A link can open in the current window or a new window, depending on its configuration.
In UI building mode, drag bottom tabs to reorder them. You can also edit a tab's title and icon, configure linkage rules, copy its UID, or delete it.
To view, show, hide, or delete mobile routes in one place, open 「Settings / Routes / Mobile routes」.
Create and open a mobile page before adding blocks to it. The approach to building page content is essentially the same as on desktop: use blocks, fields, and actions to organize business content. However, mobile navigation and some component interactions are adjusted for smaller screens.
A mobile page can also use tabs. If multiple pieces of content belong under the same navigation entry but remain relatively independent, place them in separate tabs.
If a mobile page contains only a small amount of content, use a single page. You do not need to enable tabs.
Common components adjust their arrangement and interactions for the mobile layout. For instance, multi-column content automatically switches to a single column that is easier to browse vertically; selection and date-time fields use mobile-friendly pickers; and filters, associated record selection, and subpages use interfaces designed for touch interaction.
Tables remain tables on mobile, with horizontal scrolling for columns that extend beyond the screen. Any additional mobile behavior depends on the support provided by each block.
Content opened from view, edit, associated record selection, and similar actions appears as a mobile subpage. The subpage provides a back button that returns you to the previous page.
When you open a deeper subpage, the bottom tab bar is hidden to leave more room for the current content. It reappears when you close the subpage or return to the previous level.
When switching between bottom tabs, the state of open pages is preserved, making it easier to move between mobile tasks.
Mobile routes can be maintained in the Route Manager. Open 「Settings / Routes / Mobile routes」 to add, edit, delete, show, or hide pages and links, or to configure tabs for a page.
Mobile route access permissions are configured separately from desktop permissions. Under role permissions, open 「Mobile routes」 and select the pages the current role can access. See Permission configuration for details.
You can build separate desktop and mobile pages from the same data table. For instance, a desktop page may use a table with many fields for data processing, while a mobile page may use a simpler list or form for on-site data entry.
The two layouts do not synchronize pages automatically. Changes to desktop pages, menus, or routes do not update the mobile configuration, and mobile changes do not affect desktop pages.
:::tip Recommendation
If mobile users only need occasional access to desktop pages, try the responsive desktop layout first. Build a separate mobile layout only when you need dedicated navigation and page workflows for mobile devices.
:::